Grid template areas provide a visual, semantic way to define grid layouts using named regions instead of line numbers. With grid-template-areas, you can literally "draw" your layout in CSS, making it incredibly readable and maintainable. This approach is perfect for page-level layouts where you want to clearly define sections like header, sidebar, main content, and footer.
What Are Grid Template Areas?
Grid template areas let you name sections of your grid and then assign items to those named areas. This creates self-documenting, easy-to-understand layouts.
Template Areas vs Line Numbers
Line Numbers (Previous Method)
.header {
grid-column: 1 / -1;
grid-row: 1 / 2;
}
.sidebar {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.main {
grid-column: 2 / 4;
grid-row: 2 / 3;
}Named Areas (New Method)
.container {
grid-template-areas:
"header header header"
"sidebar main main";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }Named areas are more readable, maintainable, and visually represent the layout structure!
Key Benefit: With grid-template-areas, you can see the layout structure directly in your CSS. Each string represents a row, and each word in the string represents a column. It's like ASCII art for your layout!
grid-template-areas Property
The grid-template-areas property defines named grid areas using a visual string-based syntax.
/* Define grid template areas */
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar content aside"
"footer footer footer";
}
/* Rules for grid-template-areas */
.container {
grid-template-areas:
"area1 area2 area3" /* Each string is a row */
"area1 area4 area4"; /* Each word is a column */
/* Areas must be rectangular (no L-shapes or T-shapes) */
/* Use same name to span multiple cells */
/* Use . (dot) for empty cells */
}
/* Empty cells with dots */
.container {
grid-template-areas:
"header header header"
"sidebar content ." /* Empty cell in top-right */
"footer footer footer";
}grid-template-areas Visualization
Template Areas Syntax Rules
✓ Valid: Rectangular areas
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
/* 'header' spans 3 columns - valid rectangle
'main' spans 2 columns - valid rectangle */✗ Invalid: Non-rectangular areas (L-shape)
grid-template-areas:
"header header sidebar"
"main main sidebar";
/* 'sidebar' is L-shaped - INVALID! */✓ Valid: Using dots for empty cells
grid-template-areas:
"header header ."
"sidebar main main"
". footer footer";
/* Dots (.) represent empty cells */grid-area with Named Areas
The grid-area property assigns an item to a named grid area defined in grid-template-areas.
/* 1. Define areas on the container */
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
/* 2. Assign items to areas */
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
/* That's it! No line numbers needed */Named Areas Example
Empty Cells with Dots
Use dots (.) to represent empty cells in your grid template areas. Multiple consecutive dots count as a single empty cell.
/* Single dot for empty cell */
.container {
grid-template-areas:
"header header ."
"sidebar main main"
". footer footer";
}
/* Multiple dots (same as single dot) */
.container {
grid-template-areas:
"header header ..."
"sidebar main main"
"... footer footer";
/* Same result as single dots */
}
/* Use dots for visual alignment */
.container {
grid-template-areas:
"header header header header"
"sidebar content content ."
"sidebar content content ."
"footer footer footer footer";
}Empty Cells with Dots
Line-Based Placement
You can still use grid-column and grid-row with line numbers alongside template areas for precise positioning.
/* Combine template areas with line numbers */
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 100px);
grid-template-areas:
"header header header header"
"sidebar main main aside"
"footer footer footer footer";
}
/* Use named area */
.header {
grid-area: header;
}
/* Override with line numbers */
.special-item {
grid-column: 2 / 4;
grid-row: 2 / 3;
/* This overrides template areas for this specific item */
}
/* Mix both approaches */
.main {
grid-area: main; /* Start with named area */
/* Can still adjust with line numbers if needed */
}Mixing Named Areas and Line Numbers
When to Mix: Use template areas for the overall structure, and line-based placement for special cases or overlapping elements. This gives you the best of both worlds—readable structure with precise control when needed.
Responsive Layouts with Template Areas
Template areas make responsive layouts incredibly easy by redefining the grid structure at different breakpoints.
/* Mobile: stacked layout */
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
/* Tablet: two-column */
@media (min-width: 768px) {
.container {
grid-template-columns: 200px 1fr;
grid-template-areas:
"header header"
"nav main"
"nav aside"
"footer footer";
}
}
/* Desktop: three-column */
@media (min-width: 1024px) {
.container {
grid-template-columns: 200px 1fr 250px;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
}
/* Items stay the same - just assign to areas */
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }Responsive Layouts with Template Areas
📱 Responsive Design Advantage:
With template areas, you only change the grid-template-areas definition at each breakpoint. The items remain the same—they automatically reposition based on the new layout structure. This is far more maintainable than repositioning with line numbers!
Practical Page Layouts
Blog Layout
Blog Layout with Template Areas
App Dashboard Layout
App Dashboard Layout
Key Takeaways
- grid-template-areas: Visual, semantic way to define layouts with named regions
- grid-area: Assigns items to named areas
- Each string in template-areas represents a row
- Each word in the string represents a column
- Areas must be rectangular (no L-shapes or T-shapes)
- Use same name multiple times to span cells
- Use dots (
.) for empty cells - Can combine with line-based placement (grid-column/grid-row)
- Perfect for responsive layouts—just redefine areas at breakpoints
- More readable and maintainable than line numbers for complex layouts
- Template areas create self-documenting code
- Items automatically reposition when template changes
What's Next?
Now that you've mastered grid template areas and line-based placement, you're ready to learn about Responsive Grids. In the next lesson, we'll explore auto-fit and auto-fill for automatically responsive grids, the minmax() function for flexible sizing, and advanced responsive grid techniques. These features make Grid truly powerful for creating layouts that adapt perfectly to any screen size.
Grid template areas give you semantic, visual layout control that's incredibly maintainable. Combined with the responsive grid features coming next, you'll have complete mastery over creating sophisticated, adaptive layouts with minimal code. You're well on your way to becoming a CSS Grid expert!