CSS grid-area Property
Example
The following example sets "item8" to start at the 2nd row and 1st column, spanning 2 rows and 3 columns:
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| grid-area | 57 | 16 | 52 | 10 | 44 |
Property Definition and Usage
The grid-area property specifies the size and location of a grid item within a grid layout. It is a shorthand property for:
The grid-area property can also name the grid item.
Named grid items can be referenced by the container's grid-template-areas property.
| Default value: | auto / auto / auto / auto |
|---|---|
| Inherited: | no |
| --- | --- |
| Animatable: | Yes. Read about animatable Try it |
| --- | --- |
| Version: | CSS Grid Layout Module Level 1 |
| --- | --- |
| JavaScript syntax: | object.style.gridArea="1 / 2 / span 2 / span 3" Try it |
| --- | --- |
Syntax
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
| Value | Description |
|---|---|
| grid-row-start | Specifies on which row to start displaying the grid item. |
| grid-column-start | Specifies on which column to start displaying the grid item. |
| grid-row-end | Specifies on which row to stop displaying the grid item, or how many rows to span. |
| grid-column-end | Specifies on which column to stop displaying the grid item, or how many columns to span. |
| itemname | Specifies the name of the grid item |
More Examples
The following example names "item1" as "myArea" and spans across five columns:
Example
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Each row is defined inside single quotes ' ' with columns separated by spaces.
A . represents an unnamed grid item.
Example
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
To define two rows, add another set of single quotes ' ' to define the columns of the second row.
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