grid-area

Last Updated: May 1, 2022

Definition

The grid-area property is used to define the size, and location of the grid layout. This is the shorthand representation of the following properties

grid-area syntax

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Example

Item1 will start from the 1st column of the 1st row and it will span two units along both directions

item1{
 grid-area: 1 /1 /span 2/ span 2;
}
1
2
3
4
5
6
7
8
9
Test