CSS grid-row

The grid-row property in CSS is used to specify a grid item’s location within the grid rows. It can be used to both set the starting and ending lines of the grid item within the grid container.

The syntax for using the grid-row property is:


.item {
  grid-row:  / ;
}

Here, specifies the line where the grid item will start, and specifies the line where the grid item will end. These lines can be numbers or keywords like span to specify the number of rows the grid item should span.

Result:

In this example, we have a grid container with 3 columns and auto-sized rows. Each grid item is styled with a height of 100px and a background color. By using the grid-row property, we can position the grid items within the grid rows.

The first item starts at row 1 and spans 2 rows. The second item spans 2 rows starting from row 2. The third item starts at row 1 and ends at row 2.