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

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