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.
Place an item at the start of the second row:
Place an item at the start of the third row on the second column:
Place an item across multiple rows starting from the third row:
grid-row-end: span 2;
|Specifies the line number on which the grid item's top edge should be placed.
|Specifies the number of grid tracks the grid item should span from the start line.
|Default value. The grid item will be placed automatically by the grid auto-placement.
- 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.