CSS grid-area property
CSS grid-area specifies an area on grid to place an item. It is either specified by four grid lines (grid-row-start, grid-column-start, grid-row-end, grid-column-end) or named-area (defined by grid-template-areas). If only one or two values are specified, the other values are set to auto.
We have a grid that consists of 3 rows, 3 columns, 4 horizontal grid lines and 4 vertical grid lines.
grid-area : grid-row-start / grid-column-start / grid-row-end / grid-column-end :
'1/2' means the grid-row-start and grid-column-start are 1 and 2 respectively. The other two values are set to auto.
'2/3/2/3' means the grid-row-start, grid-column-start, grid-row-end, and grid-column-end are 2, 3, 2, and 3 respectively.
'c' is the name area that we'll use to place an item.
See longhand properties
Was this article helpful?