The grid-template-areas property defines a grid's layout using named string-based regions, letting you visually sketch a layout's structure directly in the CSS and assign specific grid items to named areas.

Syntax

grid-template-areas:
  "area1 area1 area2"
  "area3 area3 area2";

Deep Dive Course

Each quoted string represents one row of the grid, and each space-separated word within it names the area occupying that specific cell — repeating the same name across adjacent cells, in a single row or across multiple rows, makes that named area span across all of those cells as one combined region. An individual grid item is then assigned to one of these named areas via the separate grid-area property, matching by name, which makes the overall layout structure visually apparent directly from reading the grid-template-areas declaration itself, functioning almost like an ASCII-art sketch of the actual intended layout.

1Understanding Grid-template-areas

💡

grid-template-areas reads almost like a visual ASCII-art sketch of the actual intended layout structure directly in the CSS, which makes it one of the most readable, self-documenting ways to define a page's overall grid layout compared to manually calculating column/row line numbers.

editor.html

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

localhost:3000

2Practical Example

Here is a real-world application of Grid-template-areas showing how it is used in production CSS code.

editor.html

.layout {
  grid-template-areas:
    "header header"
    "nav    content"
    "footer footer";
}

localhost:3000

3Best Practices

Follow these guidelines when working with Grid-template-areas:

1. Use grid-template-areas for page-level layouts, like header/sidebar/main/footer, where its visual, sketch-like readability makes the overall structure immediately clear from the CSS alone

2. Assign each grid item to its named area via the grid-area property, matching the exact name used in grid-template-areas

3. Use a period to represent an intentionally empty grid cell within a grid-template-areas definition, rather than a real, occupied area name

⚠️

Tip: grid-template-areas reads almost like a visual ASCII-art sketch of the actual intended layout structure directly in the CSS, which makes it one of the most readable, self-documenting ways to define a page's overall grid layout compared to manually calculating column/row line numbers.

editor.html

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

localhost:3000

Examples

Example 01Basic Usage

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

Example 02Advanced Example

.layout {
  grid-template-areas:
    "header header"
    "nav    content"
    "footer footer";
}

Best Practices

Use grid-template-areas for page-level layouts, like header/sidebar/main/footer, where its visual, sketch-like readability makes the overall structure immediately clear from the CSS alone
Assign each grid item to its named area via the grid-area property, matching the exact name used in grid-template-areas
Use a period to represent an intentionally empty grid cell within a grid-template-areas definition, rather than a real, occupied area name

Interview Question

Why does repeating the same area name across multiple adjacent cells in a grid-template-areas definition make that item span across all of those cells as a single combined region?▼

Hint: Think about what grid-template-areas is fundamentally describing — a literal, visual map of which named area occupies each individual grid cell.

grid-template-areas is fundamentally a direct, cell-by-cell visual map, where each individual word position in the quoted strings represents exactly one specific grid cell, and the name written at that position simply declares which named area claims that particular cell. When the exact same area name is written across multiple adjacent cell positions, whether horizontally across a single row or vertically down multiple rows, the grid parser interprets this as those multiple individual cells all belonging to, and being claimed by, that one single named area collectively, which is precisely what causes that one area, and the one grid item ultimately assigned to it via grid-area, to visually span and occupy that entire combined, multi-cell region as a single continuous block rather than several separate, disconnected cells. This is exactly why grid-template-areas' syntax so directly mirrors the actual visual layout it produces, since the literal repeated pattern of names in the declaration is a direct, readable representation of exactly which cells combine together into each larger named region.

Exercises

MediumPractice using Grid-template-areas in a real scenario.

View Solution

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

Frequently Asked Questions

Why does repeating the same area name across multiple adjacent cells in a grid-template-areas definition make that item span across all of those cells as a single combined region?▼

Related Functions

Grid-columnGrid-rowDisplay-grid