CSS grid-area Property

The grid-area property is used to specify the size and location of grid items in a grid layout. The grid-area property is also used to give a grid item a name.




Property Values

Value Description
grid-row-start Specifies which row the item should be displayed in.
grid-column-start Specifies which column the item should be displayed in.
grid-row-end Specifies which row-line the item should be displayed on, as well as how many rows it should span.
grid-column-end Specifies where to stop displaying the item or how many columns to span.
item-name The grid item's name is specified here.

Supported Browsers

Property Chrome Firefox Safari Edge / IE Opera
grid-area 57.0 52.0 10.0 16.0 44.0