CSS grid-row-start

The grid-row-start property in CSS is used to specify at which grid row to start an item. It is a part of the CSS Grid Layout module, which allows us to create grid-based layouts in our web pages.

To use the grid-row-start property, we need to specify the grid line at which we want the item to start. The grid lines are numbered starting from 1 and can be both positive and negative integers.

Let's look at an example to understand how the grid-row-start property works.

Result:
1
2
3
4

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
}

.item1 {
  grid-row-start: 1;
}

.item2 {
  grid-row-start: 2;
}

.item3 {
  grid-row-start: 1;
}

.item4 {
  grid-row-start: 3;
}

In the above example, we have created a grid container with 3 columns using the grid-template-columns property. We have defined four items inside the grid container with class names item1, item2, item3, and item4.

By using the grid-row-start property, we have specified at which grid row each item should start. The items are arranged in the grid accordingly.

It is important to note that the grid-row-start property does not affect the end position of the grid item. To control the end position of the item, we can use the grid-row-end property.