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

grid-row-end

Definition

The grid-row-end property is used to specify the end position of a grid item within a grid container along the grid's vertical axis. It specifies the grid line where the item ends. This property is used in conjunction with the grid-row-start property, which specifies the starting position of the grid item along the vertical axis. Together, these two properties define a grid item's vertical position within the grid.

Examples

Using grid-row-end to span multiple rows:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

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

Using grid-row-end with named grid lines:

.grid-container {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: [top] 100px [middle] 100px [bottom] 100px;
}

.grid-item {
 grid-row-start: top;
 grid-row-end: middle;
}

Using grid-row-end with negative grid lines:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.grid-item {
  grid-row-start: 1;
  grid-row-end: -1;
}

Values

ValueDescription
<number>Specifies the end position of the grid item in terms of grid lines. Positive values count from the start of the grid, negative values count from the end of the grid.
<name>Specifies the name of the named grid line where the grid item should end.
span <n>Specifies the number of rows that the grid item should span, starting from its grid-row-start position.

Best Practices

  • Always use the grid-row-start property in conjunction with grid-row-end to define the full vertical extent of the grid item.
  • When using named grid lines, make sure the names are consistent and easy to understand.
  • Avoid using the grid-row-end property to position grid items in the middle of a row. Instead, use the grid-row-start and span properties to define a block of rows.
  • Don't forget that the grid-row-end property can accept negative values to count from the end of the grid.
  • Consider using shorthand properties

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes