CSS Grid
Grid Areas
Describe page regions with named areas and understand how the auto-placement algorithm fills a grid. The chapter combines named page regions with repeat(), auto-fill, auto-fit, implicit tracks, dense packing, and the auto-placement algorithm.
Named grid areas describe where major regions belong. Auto-placement handles grid items without explicit coordinates by following a predictable placement algorithm.
The two techniques work at different scales. A page shell benefits from readable area names, while a catalog of repeated cards usually benefits from automatic tracks and placement. Understanding implicit rows and columns prevents surprise sizes when an item lands beyond the explicit grid. This topic also connects with Grid Placement and Grid Layout Example.
Named areas make page layouts readable
Example
css
.page {
display: grid;
grid-template:
"header header" auto
"nav main" 1fr
"footer footer" auto
/ 14rem minmax(0, 1fr);
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }Let repeated content place itself
Example
css
.catalog {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-auto-flow: row;
grid-auto-rows: minmax(10rem, auto);
}auto-fill preserves empty tracks; auto-fit collapses them. Dense packing may move later items into earlier gaps, so avoid it when visual order must match reading order.
Grid Area Properties
| Property | Purpose | Example |
|---|---|---|
| grid-template-areas | Names cells in the explicit grid. | "head head" "nav main" |
| grid-area | Places an item in a named area. | grid-area: main |
| grid-auto-flow | Controls automatic item placement. | grid-auto-flow: dense |
| grid-auto-columns | Sizes implicit columns. | grid-auto-columns: minmax(12rem, 1fr) |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid Areas example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.page {
display: grid;
grid-template:
"header header" auto
"nav main" 1fr
"footer footer" auto
/ 14rem minmax(0, 1fr);
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }
.catalog {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-auto-flow: row;
grid-auto-rows: minmax(10rem, auto);
}
</style>
</head>
<body>
<div class="page"><header>Header</header><nav>Navigation</nav><main><section class="catalog"><article>One</article><article>Two</article><article>Three</article></section></main><footer>Footer</footer></div>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| repeat() in Grid tracks | 57 | 16 | 76 | 10.1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Implicit tracks are created when content lands outside the explicit grid. Size them deliberately with
grid-auto-columnsandgrid-auto-rows. - Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Use named areas for major regions and auto-placement for repeated content whose source order already makes sense.
Prefer normal row-wise auto-placement when source order is meaningful. Dense packing can close visual gaps, but it may display a later item before an earlier one. Use it only when the items are genuinely interchangeable and the changed visual order causes no confusion.