CSS: grid-template-areas

The grid-template-areas property creates a named map of Grid regions, making a page layout easier to read and rearrange.

What you will learn

How strings define named Grid areas
How grid-area connects an item to a name
How to change the map in a media query

Minimal example

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

Each quoted row describes one Grid row. Repeating a name makes one area span multiple cells; a dot represents an intentionally empty cell.

Common mistakes

Keep the area map rectangular; a name cannot form an irregular shape.
Use matching names between the map and grid-area.
Change the named map at a breakpoint when the mobile reading order should differ.