Grid Template Areas
Name areas of the grid with grid-template-areas for readable, semantic layouts.
Grid Template Areas is a free CSS Academy lesson on CoddyKit — lesson 4 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 CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Named Grid Areas
grid-template-areas lets you name regions of the grid using ASCII art. It makes layouts highly readable and maintainable.
Defining Template Areas
Each quoted string represents a row. Cells with the same name form a rectangular area. Use . for empty cells.
.page {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}Placing Items by Name
Assign grid items to named areas using the grid-area property with the area name (no quotes):
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Rules for Template Areas
Named areas must be rectangular. Each cell can only be part of one area. An area name cannot appear in disconnected cells — that would be invalid.
Empty Cells with .
Use one or more periods to mark empty cells in grid-template-areas:
.layout {
grid-template-areas:
"logo nav nav"
". main sidebar"
"footer footer footer";
}Responsive Areas with Media Queries
Redefine grid-template-areas in media queries to completely reshape the layout structure:
.page {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
@media (min-width: 768px) {
.page {
grid-template-columns: 200px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
}Generated Named Lines
When you name an area, CSS automatically creates named grid lines: area-start and area-end for both rows and columns.
/* If area is "main": */
/* Column lines: main-start and main-end */
/* Row lines: main-start and main-end */
.overlay {
grid-column: main-start / main-end;
}Combining Areas and Line Numbers
Named areas and explicit line numbers can coexist in the same grid. Items can be placed by name, line, or span.
Visual Grid Design Workflow
A common workflow: sketch the layout in template areas first, then define column and row sizes. This separates structure from sizing concerns.
.dashboard {
grid-template-areas:
"header header header"
"nav main ads"
"footer footer footer";
grid-template-columns: 180px 1fr 120px;
grid-template-rows: 64px 1fr 48px;
}Template Areas and Accessibility
Grid visual order may differ from DOM source order. Screen readers follow DOM order, not visual placement. Ensure the DOM order makes logical sense even when items are visually reordered by grid placement.
grid-template Shorthand
Combine grid-template-areas, grid-template-columns, and grid-template-rows in one grid-template declaration.
.page {
grid-template:
"header header" 64px
"sidebar main" 1fr
"footer footer" 48px
/ 200px 1fr;
}Quick Check
In grid-template-areas, what character is used to mark an empty cell?
Recap
grid-template-areas uses ASCII art to name layout regions. Items are placed with grid-area: name. Areas must be rectangular, and empty cells use .. Redefine areas in media queries for fully responsive layouts with clean, readable CSS.
Frequently asked questions
Is the “Grid Template Areas” lesson free?
Yes — the full text of “Grid Template Areas” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Grid Template Areas”?
Name areas of the grid with grid-template-areas for readable, semantic layouts. You practise CSS 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 CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Grid Template Areas” 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 CSS Academy lesson?
Yes. Every CSS 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.