grid-area # 11

June 20, 2022 0

We can give an item a name and this name can be referenced in grid-template-areas.

.item-a {
    grid-area: header;
}

Or,

grid-area property can be used as the shorthand property of the following …

grid-row-start

grid-column-start

grid-row-end

grid-column-end

Example

.item {
    grid-area: 2 / 1 / span 2 / span 3
}