CSS Grid Item

A grid container contains grid items.

By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows.

The grid-column Property:

The grid-column property defines on which column(s) to place an item.

You define where the item will start, and where the item will end.

 

Example

Make “item1” start on column 1 and end before column 5:

 .item1 {
   grid-column: 1 / 5;
} 

The grid-row Property:

The grid-row property defines on which row to place an item.

You define where the item will start, and where the item will end.

Example

Make “item1” start on row-line 1 and end on row-line 4:

 .item1 {
   grid-row: 1 / 4;
}