grid-template-areas

A layout drawn as a picture of itself

CaveatThe ASCII picture is the strictest syntax on this site: every row string must name the same number of columns, and every name must add up to a rectangle. One typo, one row a cell short, one L-shaped area — and the entire declaration is invalid, silently, so the grid falls back to auto placement and the layout collapses with no error anywhere. There is no patching it per breakpoint either: a media query has to restate the whole picture, because the map replaces, it never merges — and grid-template-columns has to move with it, or the old second track survives the breakpoint, sits there empty, and the whole layout quietly lives in half its width. A lone dot names a cell nothing owns.

FallbackNo grid means block flow in source order — which points at the deeper caveat even where grid runs everywhere: areas let the picture disagree with the DOM, and the Tab key and a screen reader follow the DOM, not the picture. Keep the source in reading order and let the areas do the rearranging, never the other way round.

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
}
header { grid-area: head; }

@media (width < 640px) {
  /* restate all of it: the map
     replaces, it never merges */
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head" "main" "side" "foot";
  }
}

Published 6 Sep 2026