Drawing the layout
CSS grid template areas let you sketch a page in text. You declare named cells, then assign each child to a name.
- grid template areas holds rows of quoted strings, each string a row of cell names.
- grid template columns and grid template rows set the track sizes.
- Each child sets grid area to a name to occupy that region.
A name repeated across adjacent cells spans those cells, so writing the same name twice in a row makes an item two columns wide. A dot stands for an empty cell.
Why it reads well
The strings form an ASCII map of the page, so the layout is visible in the stylesheet itself. Rearranging the page is a matter of editing the strings, and responsive variants just redefine the areas inside a media query without touching the children.
- Every row must have the same number of cells.
- Named regions must form a rectangle, never an L shape.
Key idea
Template areas turn a layout into a named ASCII map, so children attach to regions by name and responsive changes only rewrite the strings.