CSS grid-template-areasProperty
Example
The following example names item1 "myArea" and spans five columns:
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Try it Yourself »
Browser Support
The numbers in the table indicate the first browser version that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| grid-template-areas | 57 | 16 | 52 | 10 | 44 |
Property definition and usage notes
The grid-template-areas property is used to set the grid layout.
The grid-area property can be used to name grid items.
Named grid items can be referenced via the container's grid-template-areas property.
Each line is within single quotes' 'Defined, separated by spaces.
.A number indicates a grid item with no name.
| Default Value: | auto |
|---|---|
| Inherited: | no |
| animation: | Supported.Read Aboutanimatable Try it Yourself |
| version: | CSS Grid Layout Module Level 1 |
| JavaScript Syntax: | object.style.gridTemplateAreas=". . . myArea myArea" Try it Yourself |
Syntax
grid-template-areas: none|itemnames;
| Value | Description |
|---|---|
| none | Default value, no named grid referenced. |
| itemnames | Specifies how each column and row should be displayed. |
More Examples
.The number indicates a grid item without a name.Example
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
Try it Yourself »
The following example sets "item1" to span 2 rows and 2 columns:
Example
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
Try it Yourself »
Name all grid items and create a webpage template:
Example
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}
Try it Yourself »
Related Articles
CSS Tutorial:CSS Grid Layout
CSS Reference Manual:grid-areaProperty
CSS Reference Manual:grid-templateProperty
other extensions