Grid Template Areas
Layouts as ASCII art.
Name regions of a grid in plain English, then assign children to them. The CSS reads like the layout it produces.
Name your regions
grid-template-areas accepts a string per row, each cell named or . for empty. Children claim a region with grid-area: name. Suddenly your CSS reads like the wireframe.
Single source of truth
A change to the layout is a change to one declaration β no juggling of grid-row / grid-column. Brilliant for responsive variants where the entire shape changes.
Combine with grid-template-columns/rows
The areas declaration only assigns names. You still control track sizes via grid-template-columns and grid-template-rows.
Reshape the whole layout at a breakpoint
Because the layout lives in one grid-template-areas declaration, a media query can swap the entire shape β columns to a single stack β by redeclaring the areas (and tracks). The children never move; only their named slots do.
Span cells by repeating a name; leave gaps with .
A name repeated across adjacent cells makes that area span them β the rectangle is implied by where the name appears. A . marks a deliberately empty cell that no child occupies. Here a hero spans the full top row, a sidebar spans two rows, and one corner is left blank.
A compact card: media object with named slots
grid-template-areas is not only for page chrome β small components read clearly too. A media object (figure beside a body) becomes two named regions, and the align/justify of each child stays decoupled from the structure.
Try it 4 examples
Holy Grail layout
HTML+CSS+JSintroThe five children land exactly where their names appear in grid-template-areas: header and footer stretch the full width because their name fills all three columns, while nav, main, and aside sit side by side in the middle row sized by 160px 1fr 200px. The CSS block visually mirrors the rendered wireframe, which is the whole point of named areas.