CSS Grid: template-areas auto-fit minmax
Name grid areas for readable layouts, use auto-fit with minmax() for responsive columns, and control implicit tracks.
CSS Grid: template-areas auto-fit minmax is a free Frontend Academy lesson on CoddyKit. This is lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, and your progress syncs across the web and the CoddyKit app. The Frontend Academy course includes 4 lessons in total.
Named Template Areas — Visual Layout
grid-template-areas lets you name regions in a visual ASCII-art format. Each string is a row; each word is a cell. Dots (.) represent empty cells. Assign elements with grid-area: name.
.layout {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 48px;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Responsive Template Areas with Media Queries
Change the template-areas layout at breakpoints to move the sidebar from a column to below main on mobile.
.layout {
grid-template-areas:
'header'
'main'
'sidebar'
'footer';
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 220px 1fr;
}
}auto-fit vs auto-fill
auto-fit: collapses empty tracks so items stretch to fill the row. auto-fill: keeps the grid structure even if tracks are empty. For responsive card grids, auto-fit is almost always what you want.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}minmax() in Depth
minmax(min, max) defines a track that is at least min and at most max. Common combinations: minmax(0, 1fr) (fully flexible), minmax(200px, 1fr) (responsive with minimum), minmax(auto, auto) (sized to content).
Spanning Columns and Rows
Use grid-column: span 2 to make an item span two columns. Combine with grid-row: span 2 for a featured item that takes up a 2×2 block in the grid.
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Or explicit placement: */
.featured {
grid-column: 1 / 3; /* from line 1 to line 3 */
grid-row: 1 / 3;
}Dense Auto Placement
grid-auto-flow: dense back-fills empty gaps with smaller items. Useful for masonry-like layouts where items have varying sizes.
.mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}Fractional Units and Percentages
The fr unit always refers to the available space after fixed-size tracks and gaps are subtracted. Mixing fr with fixed sizes gives you maximum flexibility: fixed sidebar, flexible main.
grid-auto-columns and grid-auto-rows
These control the size of implicitly created tracks (when items are placed outside the explicit grid). grid-auto-rows: minmax(100px, auto) gives implicit rows a minimum height.
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 8px;
}Inspecting Grid in DevTools
Chrome DevTools overlays grid lines and area names on the page when you click the 'grid' badge next to a grid container in the Elements panel. Use it to debug unexpected track sizes and item placement.
CSS Subgrid
grid-template-columns: subgrid lets a nested grid align to the parent grid's tracks. Supported in all modern browsers since 2023 — essential for aligning card internals across a card grid.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* aligns to parent rows */
}When Grid Beats Flexbox
Grid is the winner when you need explicit two-dimensional control — when both rows and columns matter. If you just want items in a row or a stack, Flexbox is simpler.
Quick Check
Which CSS Grid value creates as many columns as fit at minimum 200px, with each column sharing remaining space equally?
Recap: CSS Grid Advanced
grid-template-areas creates readable named layouts. auto-fit + minmax makes responsive grids without media queries. Span items across columns and rows. Dense auto-flow fills gaps. Use DevTools grid overlay to debug. Subgrid aligns nested items to parent tracks.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
Frequently Asked Questions
Is the “CSS Grid: template-areas auto-fit minmax” lesson free?
Yes — the full text of “CSS Grid: template-areas auto-fit minmax” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO. The Frontend Academy course includes 4 lessons in total.
What will I learn in “CSS Grid: template-areas auto-fit minmax”?
Name grid areas for readable layouts, use auto-fit with minmax() for responsive columns, and control implicit tracks. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
How long does the “CSS Grid: template-areas auto-fit minmax” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Flexbox Deep Dive: alignment wrapping order
- CSS Grid: template-areas auto-fit minmax
- Combining Flexbox and Grid
- CSS Variables for Theming