CSS grid-row Property

Definition and Usage

The grid-row property is the shorthand for grid-row-start and grid-row-end. It sets where a grid item begins and ends vertically by choosing row lines, a span, or auto.

Use it on a grid item inside a display: grid container with grid-template-rows. For columns, use grid-column. For all four edges (or a named area), use grid-area.

CSS Syntax

One value sets start (end stays auto). Two values separated by / set start then end. Initial value is auto / auto.

Property Values

How to Use grid-row

Create rows, then place one item with start and end lines.

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 on the item (e.g. 1 / 3 or span 2).
4. Optionally set grid-column, or use grid-area for both axes.

Live Preview

Three equal rows. Change only grid-row on the highlighted item.

CSS Examples

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

<style>
  .grid {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
  }
  .item {
    grid-row: 1 / 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: 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: 2 / -1;
  }
</style>

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

Key Takeaways