grid-row-start

Definition

The grid-row-start property specifies the starting grid line on which the grid item will be placed within the grid container. It defines the grid item's vertical position by determining the grid line at which its top edge is placed. This property is used in conjunction with other properties in the grid layout, such as grid-template-rows and grid-column-start, to position grid items on a grid container.

Examples

Place an item at the start of the second row:

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

Place an item at the start of the third row on the second column:

.grid-item {
  grid-column-start: 2;
  grid-row-start: 3;
}

Place an item across multiple rows starting from the third row:

.grid-item {
  grid-row-start: 3;
  grid-row-end: span 2;
}

Values

Best Practices

• Always define both grid-row-start and grid-row-end properties together to avoid any unexpected grid item placement.
• Use the span keyword to easily span a grid item across multiple rows.
• Consider using named grid lines to increase code readability and reduce the chances of mistakes.
• Keep in mind that negative line numbers count backwards from the end of the grid.
• Avoid using auto for grid-row-start if you want to have precise control over grid item placement.

Browser Compatibility