Grid-template-areas

CSS course · Intermediate · Lesson 42/98

Learn named regions with grid-template-areas.

grid-template-areas: named regions

grid-template-areas splits a grid into named regions. Each row is written in double quotes; region names are separated by spaces. Example: "header header" "main aside" defines a two-row layout.

When the same name repeats side by side, that region spans multiple columns. This approach lets you see the layout while reading the code; it's the clearest way to write a grid.

Quotes, dots and repeated names

Each row is wrapped in double quotes; region names are separated by spaces. If the same name appears side by side, the region widens. An empty cell uses a dot: "main ." puts main on the left and leaves the right cell empty.

Region names contain only letters and digits; no spaces or special characters. An inconsistent name (e.g. 'header' on one row, 'Header' on another) is rejected; the matching is case sensitive.

A blog page skeleton

A typical blog page has four regions: header (top), main (posts), aside (side menu), footer (bottom). You can set them all in one grid-template-areas declaration.

This style carries the same clarity for screen readers and code readers alike. When someone else opens your code, the layout is immediately visible; that's why teams favor it.

Exercise Define a three-region layout

Define three regions in the .layout grid: header (top, two columns), main (content) and aside (side column). Build a two-row layout; in the second row, place main and aside side by side. Write only the grid-template-areas declaration.

Show example solution

.layout {
  grid-template-areas:
    "header header"
    "main aside";
}

Test yourself

What is grid-template-areas for?
```
.layout {
  grid-template-areas:
    "header header"
    "main aside";
}
```
- Sets column widths
- Builds a layout with named regions
- Sets row heights
- Adds automatic gaps to the grid
Show answer

Builds a layout with named regions — Correct. grid-template-areas names regions to build a visual layout.

Span main across two columns

.layout {
  grid-template-areas:
    "header header"
    ____;
}

Show answer

.layout {
  grid-template-areas:
    "header header"
    "main main";
}

Match each region name to its role

header

Top header region
main

Main content region
aside

Side column region
footer

Bottom footer region

Grid-template-areas