The grid-area
property designates the size and location of a grid item in a grid layout and is also a shorthand for grid-row-start
, grid-column-start, grid-row-end, and grid-column-end.
This property can also be used to assign a name to a grid item, which can then be referenced by the grid-template-areas property of the container.
/* .item starts on row 2 column 1, and spans 3 rows and 3 columns */
.item {
grid-area: 2 / 1 / span 3 / span 3;
}
grid-row-start
Specifies which row-line the item will start on.
grid-column-start
Specifies which column-line the item will start on.
grid-row-end
Specifies on which row-line the item will end, or the number of rows an item will span.
grid-column-end
Specifies on which column-line the item will end, or the number of columns an item will span.
itemname
Designates a name for the grid item.
Have a code example of grid-area
? Submit a codepen.io demo and we'll showcase it here ↴