CSS Grid places items by grid line numbers by default. You define where each element starts and ends using numeric coordinates like grid-column: 1 / 3.
The Grid Areas feature takes a different approach. Instead of line numbers, you assign names to regions of your grid and map items to those names. The result is CSS that reads like an ASCII drawing of your layout.
Assigning Names to Areas with the grid-area Property
The first thing to do is to define names (as you see fit) for the elements in the grid (Grid Items) using the grid-area property:
.item-1 {
grid-area: head;
}
.item-2 {
grid-area: main;
}
.item-3 {
grid-area: side;
}
.item-4 {
grid-area: footer;
}Describing the Layout Using grid-template-areas
After assigning names to areas you need to use the grid-template-areas property on the grid container to define how those areas, to which you assigned names, will be applied:
.container {
display: grid;
grid-template-columns: 2fr 2fr 1fr 2fr;
grid-template-rows: 100px 200px 100px;
grid-template-areas:
"head head . side"
"main main . side"
"footer footer footer footer";
}The value of grid-template-areas works like ASCII art. Each quoted string represents a row, and each word represents a column.
The period character (.) marks an empty cell. You can chain multiple periods (.....) for readability – they still count as one empty cell.
Spaces between names don’t matter. Here’s the exact same example formatted differently:
.container {
/* ... */
grid-template-areas:
"head head ..... side"
"main main ..... side"
"footer footer footer footer";
}The result of this code will look like this:
Now let’s change the grid-template-areas value to get a completely different layout – without touching any grid-item properties. This rearrangement shows how a single property controls the entire structure:
.container {
/* ... */
grid-template-areas:
"head head . side"
"main main main side"
". footer footer side";
/* ... */
}Responsive Layouts with Grid Areas
One of the biggest advantages of Grid Areas shows up when you add Media Queries. You can rearrange the entire layout by overriding a single property:
@media screen and (max-width: 40em) {
.container {
grid-template-areas:
"head head head head"
"main main main main"
"side side side side"
"footer footer footer footer";
}
}The element positions flip to a single-column stack without touching the grid items. Resize your browser to see it in action:
You can also build responsive grid layouts without any Media Queries using
auto-fillandminmax().
Naming Rules and Constraints
A few rules to keep in mind when working with grid-template-areas:
Areas must be rectangular. L-shaped or T-shaped regions are invalid. The browser will ignore the entire grid-template-areas declaration if any area forms a non-rectangular shape.
Every row must have the same number of columns. If your grid has 4 columns, each quoted string needs exactly 4 names (or dots).
Names are case-sensitive. "Header" and "header" are two different areas. Stick to lowercase for consistency.
Implicit Named Lines
When you define a named area, the browser automatically creates named grid lines around it. An area called main generates main-start and main-end lines for both rows and columns:
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
/* These lines are created automatically: */
/* header-start, header-end */
/* main-start, main-end */
/* sidebar-start, sidebar-end */
/* footer-start, footer-end */You can reference these lines anywhere you’d use a line number. This is useful when you need to position items that aren’t part of the named areas template.
When to Use Grid Areas vs Line Numbers
Grid Areas work best for page-level layouts where the structure is clear and fixed – headers, sidebars, main content, and footers. The ASCII art makes the layout instantly readable.
Line-based placement is better for dynamic or repetitive grids where items are generated programmatically. Card grids with auto-fill and fr units don’t benefit from named areas because the number of columns changes with the viewport.
I tend to use Grid Areas for the outermost page shell and line numbers for component-level grids inside it. Both approaches can coexist in the same layout.
FAQs
grid-template-areas is a CSS Grid property that lets you define named regions in your grid using an ASCII-art syntax. Each quoted string represents a row, and each word maps to a column. Grid items are then placed by assigning their grid-area to one of those names.grid-template-areas declaration becomes invalid and the browser ignores it......) - they all count as one empty cell. This lets you create visual gaps in your layout without extra markup.grid-template-areas value inside a media query. Since area names stay the same, you only need to change the template - no modifications to individual grid items. For example, a desktop sidebar layout can become a stacked mobile layout with a single property change.main), the browser automatically generates grid lines named main-start and main-end on both axes. You can use these implicit line names to position other items relative to your named areas.auto-fill. Both approaches can coexist in the same project.Summary
Grid Areas is my preferred way to define page-level layouts. The ASCII-art syntax makes the CSS itself a diagram of the layout, which saves me from constantly switching between code and browser to understand what goes where. Combined with a single media query override for mobile, it covers most real-world page structures with minimal CSS.
