CSS grid-row-end Property

Definition and Usage

The grid-row-end property sets where a grid item stops vertically. You pick a row line number, a span, a named line, or auto.

It works on grid items inside a display: grid container. Pair it with grid-row-start, or use the grid-row shorthand for both edges.

CSS Syntax

The initial value is auto. Integers may be negative to count from the end of the explicit grid.

Property Values

How to Use grid-row-end

Create rows, then tell one item which line to end on.

1. Build a grid with display: grid and grid-template-rows.
2. Remember lines: three rows create lines 1, 2, 3, and 4.
3. Set grid-row-end on the item (a line number or span).
4. Optionally set grid-row-start, or use grid-row shorthand.

Live Preview

Three equal rows. The item starts at line 1; change only grid-row-end.

CSS Examples

Each snippet focuses on grid-row-end. Use Try It Yourself for a live editor.

<style>
  .grid {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
  }
  .item {
    grid-row-start: 1;
    grid-row-end: 3;
  }
</style>

<div class="grid">
  <div class="item">Tall</div>
  <div>A</div><div>B</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
  }
  .item {
    grid-row-start: 1;
    grid-row-end: span 2;
  }
</style>

<div class="grid">
  <div class="item">Tall</div>
  <div>A</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
  }
  .item {
    grid-row-start: 1;
    grid-row-end: -1;
  }
</style>

<div class="grid">
  <div class="item">Full</div>
</div>

Key Takeaways