CSS grid-template-areas Property
Example
In the following example, item1 is named "myArea" and spans across five columns:
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| grid-template-areas | 57 | 16 | 52 | 10 | 44 |
Property Definition and Usage
The grid-template-areas property is used to define a grid layout.
The grid-area property can name grid items.
Named grid items can be referenced through the grid-template-areas property of the container.
Each row is defined within single quotes ' ' and separated by spaces.
A . denotes an unnamed grid item.
| Default value: | auto |
|---|---|
| Inherited: | no |
| --- | --- |
| Animatable: | Yes. Read about animatable Try it |
| --- | --- |
| Version: | CSS Grid Layout Module Level 1 |
| --- | --- |
| JavaScript syntax: | object.style.gridTemplateAreas=". . . myArea myArea" Try it |
| --- | --- |
Syntax
grid-template-areas: none|itemnames;
| Value | Description |
|---|---|
| none | Default value. No named grid areas are referenced. |
| itemnames | Specifies how columns and rows should be displayed. |
More Examples
A . denotes an unnamed grid item.
Example
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
The following example sets "item1" to span 2 rows and 2 columns:
Example
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
Naming all grid items and creating 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';
}
Related Articles
CSS Tutorial: CSS Grid Layout
CSS Reference: grid-area Property
CSS Reference: grid-template Property