Grid Named Areas Property
Last updated: 2026-09-13
grid-template-areas Grid Named Areas Property
The grid-template-areas property lets you define the grid layout structure visually with named areas. Each string represents one row, and each identifier in the string represents the area a cell belongs to; adjacent cells with the same name merge into one area automatically. It greatly improves the readability of grid layouts and is especially suited to whole-page designs.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
grid-template-areas: none | <string>+;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No named areas |
<string> | Type | Area name definition |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-template-areas | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： Because the area names are written aligned by rows and columns, the page structure is visible at a glance - one of the biggest advantages of grid-template-areas.
Warning： The number of cells in every string must match the number of grid columns, and every area must be rectangular: L-shaped or irregular shapes are not allowed.
❓ FAQ
QWhat are the rules for the area names in grid-template-areas?
AArea names must be valid CSS identifiers: they cannot start with a digit, cannot contain spaces or special characters (hyphens and underscores are fine), and cannot use global keywords such as auto or span. Each string defines one row of the grid, and adjacent cells sharing the same name inside the strings merge into one area, which must be rectangular - L-shaped or disconnected shapes are invalid.
QHow do I leave a cell empty?
AUse one or more consecutive dots (.) to represent an empty cell, for example "header . ." leaves the second and third columns empty. Every row string must have the same length, that is, the same number of cells, and the empty placeholders count toward the column count. Write a single . for a cell you want empty; extra dots only help readability and carry no meaning.
QHow do I make a responsive layout with grid-template-areas?
AMove the area assignment into the CSS: on desktop use a template like "header header" / "sidebar main", and in a mobile media query swap the template for "header" / "main" / "sidebar". The children still reference the area names with grid-area and the DOM never changes. The area names are pure labels with no semantic meaning, so you can rename them freely as long as the grid-area references on the items match the template. This decoupling of layout and structure is the core value of grid-template-areas.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Grid Area Placement
Places a grid item into a named area
Grid Column Tracks
Defines the structure of grid columns
