Grid template areas

Give a layout named regions

Lesson 18 of 20 · 13 min · Module 6: Responsive systems & a second project

Named grid areas can make a layout’s structure readable in the CSS itself. The source order should still make sense when the page becomes one column.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Map children to named grid areas
Change a layout without breaking its source order

The idea

Define grid-template-areas on the grid parent and assign each child a grid-area. Repeat an area name to let it span several cells. A media query can rearrange the template.

.layout {
  display: grid;
  grid-template-areas: "nav content";
  grid-template-columns: 1fr 1fr;
}
nav { grid-area: nav; }
main { grid-area: content; }

01Sketch the regions

Think of the template as a little map. Every quoted string describes one grid row, with names describing its cells.

02Assign the children

The template names alone do not identify which element belongs where. Each region needs a matching grid-area assignment.

03Keep reading order sensible

Visual layout does not rewrite the document’s reading or keyboard order. Choose a source order that works when the regions stack.

Your turn

Create div.layout with nav.sidebar followed by main.content. Give both nonempty text. Below 700px, use one column with areas "nav" then "content". At 700px and above, use two equal columns with areas "nav content". Use a 20px gap and assign each region to its named area.

What the checks look for

Navigation and main content are present
Small screens use one column
Wide screens use two equal columns
Navigation has its named area
Main content has its named area
Regions have a 20px gap
Small-screen areas are stacked
Wide-screen areas share one row

Try it in the editor →

Take this with you

A layout map is easiest to maintain when its names and source structure agree.

Go a little further

Add a header spanning both wide-screen columns, while keeping it first on small screens.