CSS Grid Template Areas — Layout in Words, Not Numbers

Imagine a house floor plan. One way to describe it is with numbers: room 1 is 3 metres wide, room 2 is 4 metres wide, and so on. The other way is with names: kitchen here, bedroom there, hall in the middle. Names are far easier to read — and far easier to rearrange. Grid template areas work the names way. You draw your page layout in words, give each zone a name, and the browser builds the layout from your drawing.

Diagram — see how it fits together

Drawing the map

The map is written in grid-template-areas on the grid container. Each quoted string is one row of the layout, and each word in the string is one cell. Repeating a word across cells merges them into one bigger zone:

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
}

Here the header spans both columns, the sidebar and main share the middle row, and the footer spans both columns again. A dot (.) marks an empty cell that nothing fills. Every row string must list the same number of cells, or the whole map is invalid and the browser ignores it.

Placing items by name

Each child of the grid gets its zone with the grid-area property: .header { grid-area: header; }, .sidebar { grid-area: sidebar; }, and so on. The item does not need to know which row or column it sits in — its name does all the work. The sizes still come from grid-template-columns and grid-template-rows: the sidebar column is 200px wide, the main column takes the rest, and the rows are 80px, flexible, and 60px tall.

Rearranging for mobile

This is where named areas shine. On a phone, the sidebar should move below the main content instead of beside it. With numbered columns you would rewrite every item's placement; with areas you just rewrite the map inside a media query, using the same names in a new arrangement:

@media (max-width: 600px) {
  .page {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

Nothing else changes — the items keep their grid-area names, and the browser reflows the whole page from the new map.

Common mistakes

• Writing rows with different cell counts — every row string must have the same number of words, or the map is invalid.
• Forgetting to give an item a grid-area — an unnamed item is auto-placed by the browser, which usually puts it somewhere you did not intend.
• Using an area name that starts with a digit, like 2nd-column — the whole declaration is dropped.
• Expecting the map alone to size the zones — the map only places them; grid-template-columns and grid-template-rows still set the sizes.
• Rewriting every item's placement in the mobile media query — with areas you only rewrite the map, the items keep their names.

Remember

• grid-template-areas draws the layout in words: one quoted string per row, one word per cell.
• Repeating a word across cells merges them into one bigger zone; a dot marks an empty cell.
• Children take their zone with grid-area: name; — they never count rows or columns.
• Every row string must have the same number of cells, and names cannot start with a digit.
• For mobile, rewrite only the map in a media query — the items keep their names.

Example explained

• grid-template-areas: "header header" "sidebar main" "footer footer"; — the map: header across the top, sidebar beside main in the middle, footer across the bottom.
• grid-template-columns: 200px 1fr; — the sidebar column is fixed at 200px and the main column takes whatever space is left.
• .header { grid-area: header; } — the header takes the header zone, which spans both columns because the word repeats in the map.
• .main { grid-area: main; } — the main content takes the main zone, beside the sidebar on wide screens.
• @media (max-width: 600px) — on a narrow screen the map is rewritten as a single column: header, main, sidebar, footer, stacked in that order.