grid-area
The grid-area property places a grid item by naming a template area or specifying its row and column lines.
Syntax
grid-area: <name> | <row-start> / <col-start> / <row-end> / <col-end>;
Examples
.layout {
display: grid;
grid-template-areas:
'head head'
'side main'
'foot foot';
}
.header { grid-area: head; }
.sidebar { grid-area: side; }
Output
Positions the header across the top and the sidebar in the left middle cell of the named grid.
Notes
Named areas must be defined with grid-template-areas on the container. The four-value line form is row-start / column-start / row-end / column-end. Spanning is also possible with the span keyword.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 57 |
| firefox | 52 |
| safari | 10.1 |
| edge | 16 |