Grid Template Areas as Blueprints
Draw your whole page layout in ASCII art, then rearrange it for mobile by rewriting a few strings.
grid-template-areas is the most human-readable layout tool CSS has ever shipped. You literally draw the page as a grid of names, and the browser places each element into its named region.
.page {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }Why senior devs love it
- The CSS is a picture of the layout. A new teammate understands it in seconds.
- Reordering for mobile means rewriting the strings inside a media query — the HTML never moves, so source order and accessibility stay intact.
- A dot
.leaves a cell deliberately empty.
Every string must have the same number of columns, and a region's name must form a solid rectangle — the browser will reject an L-shape, which is a helpful guardrail.
Example
When to use it
- A developer uses grid-template-areas to write the page layout as ASCII art in CSS, making it instantly readable without opening the HTML.
- A designer reorders a hero section's image and text for mobile by rewriting the areas string without touching HTML source order.
- A team creates a three-panel dashboard layout with named areas and redefines them in a media query to stack panels on tablet.
More examples
Named area full-page layout
Creates a complete three-column page shell with readable ASCII-art template areas and assigns each element with grid-area.
.page {
display: grid;
grid-template-columns: 220px 1fr 280px;
grid-template-rows: 60px 1fr 48px;
grid-template-areas:
'header header header'
'sidebar main aside '
'footer footer footer';
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }Reordering layout on mobile
Stacks image above copy on mobile then places copy left and image right on desktop — no HTML change required.
.hero {
display: grid;
grid-template-areas:
'image'
'copy';
}
@media (min-width: 768px) {
.hero {
grid-template-columns: 1fr 1fr;
grid-template-areas: 'copy image';
}
}
.hero-image { grid-area: image; }
.hero-copy { grid-area: copy; }Dot notation for empty cells
Uses a dot (.) to leave the center cell of the first row deliberately empty while named areas occupy the rest.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
'logo . cta '
'nav nav nav ';
gap: 16px;
}
.logo { grid-area: logo; }
.cta { grid-area: cta; }
.nav { grid-area: nav; }
Discussion