The grid-row property is a shorthand property that sets all of the following properties at once: grid-row-start, grid-row-end, grid-row-gap, and grid-row-align. It defines the size and position of a grid item within a grid container along the vertical axis.
Place an item at the start of the second row and span it to the end of the fourth row:
grid-row: 2 / span 3;
Place an item at the start of the third row on the second column and span it to the end of the fourth row:
grid-row: 3 / span 2;
Align an item to the end of its row and increase the gap between rows:
grid-row: 1 / 2;
<start-line> / <end-line>
|Sets the starting and ending lines of the grid item along the vertical axis.
<start-line> / <span-size>
|Sets the starting line and spans the grid item a specified number of rows from the start line.
|Spans the grid item a specified number of rows from its current position.
|Default value. The grid item will be automatically placed and sized by the grid auto-placement.
initial / inherit
|Sets the property to its initial value or inherits it from its parent element.
<row-align> (deprecated in Grid 2)
|Aligns the grid item within its row. Possible values are start, end, center, stretch, and baseline.
Note: In Grid Level 2, the grid-row-align property is deprecated in favor of the place-self and align-self properties.
- Define both the starting and ending grid lines to ensure consistent and predictable 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.
- Avoid using auto for grid-row if you want to have precise control over grid item placement and sizing.
- Use justify-self and align-self properties to align grid items within their grid cells.