grid-area
A property used to identify an element within a grid template or specify the location of an element within a grid.
Syntax
.item-one {grid-area: <area-value>;}
A <area-value>
can be any of the following:
- Grid keyword:
auto
,span
- Grid line value:
2
- Grid line name:
section-a-start
- A string:
'header'
Values for a location can also be specified as:
.item-one {grid-area: row-start / column-start / row-end / column-end;}
Example 1
A div named banner
which may be referenced within grid-template-areas:
#banner-div {grid-area: banner;}
Example 2
Text that occupies the second and third rows on the fifth column of the grid:
#text {grid-area: 2 / 5 / 4 / 6;}