1. css
  2. /properties
  3. /grid-row

grid-row

Definition

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.

Examples

Place an item at the start of the second row and span it to the end of the fourth row:

.grid-item {
  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-item {
  grid-column: 2;
  grid-row: 3 / span 2;
}

Align an item to the end of its row and increase the gap between rows:

.grid-item {
  grid-row: 1 / 2;
  grid-row-gap: 10px;
  justify-self: end;
}

Values

ValueDescription
<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.
span <size>Spans the grid item a specified number of rows from its current position.
autoDefault value. The grid item will be automatically placed and sized by the grid auto-placement.
initial / inheritSets 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.

Best Practices

  • 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.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes