# Grid template areas

Draws a grid layout with named areas, row by row.

## What does `grid-template-areas` do?

`grid-template-areas` draws the layout with names, row by row, like a little map of the page.

```css
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "menu   main";
}
```

Level: Journeyman · [More CSS terms at this level](https://www.ask-codey.com/glossary/subjects/css/journeyman)

Updated: September 27, 2026

Source: https://www.ask-codey.com/glossary/grid-template-areas