W3docs
en
Log in

CSS grid-row Property

Learn how the CSS grid-row shorthand property positions and sizes grid items across rows, with syntax, values, and live examples.

The CSS grid-row property sets a grid item's position and size within the rows of a CSS grid. It is a shorthand that combines grid-row-start and grid-row-end into one declaration, controlling which row line the item starts on and which line it ends on.

A grid is divided by horizontal row lines numbered from 1 at the top edge. grid-row tells an item to span from a start line to an end line. For independent control of each edge, use the longhand properties directly:

So grid-row: 1 / 3 is exactly equivalent to writing grid-row-start: 1; grid-row-end: 3.

Initial Valueauto / auto
Applies toGrid items
InheritedNo
AnimatableYes
VersionCSS Grid Layout Module Level 1
DOM Syntaxobject.style.gridRow = "1 / span 2"

Syntax

grid-row: <start-line> / <end-line>;

The value before the slash is the start line; the value after it is the end line. The end line is exclusive — the item fills tracks up to that line but does not include it. You can mix and match line numbers, span, and named lines:

/* Explicit line numbers */
grid-row: 2 / 4;       /* start at line 2, end at line 4 → spans rows 2 and 3 */

/* Span keyword */
grid-row: 2 / span 2;  /* start at line 2, span 2 rows */
grid-row: span 3;       /* span 3 rows from wherever auto-placement puts the item */

/* Negative line number */
grid-row: 1 / -1;      /* from first line to last line (full height) */

/* Single value — sets start only; end defaults to auto (one row) */
grid-row: 3;

How row lines are counted

A grid with three explicit rows has four row lines: lines 1, 2, 3, and 4. Positive numbers count from the top; negative numbers count from the bottom, so -1 is always the last explicit line. This makes grid-row: 1 / -1 a reliable way to span the full height of the explicit grid regardless of how many rows it has.

If you reference a line that does not exist — for example grid-row: 1 / 6 on a three-row grid — the browser creates implicit rows to satisfy it. Those implicit rows get their size from grid-auto-rows.

Basic example: placing an item on a specific row

The item with class .box is moved to the second row by setting grid-row: 2 / 3. The first row is left empty, and the remaining items flow into the auto-placed cells.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row: 2 / 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row property example</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
    </div>
  </body>
</html>
Try it Yourself »

Result

![CSS grid-row with two items](/uploads/media/default/0001/04/90bf26fe77ccc66f3b0039d2cc9a0232626ef7ca.png "CSS grid-row example result" =420x)

Spanning multiple rows with span

Using grid-row: span 2 makes an item occupy two rows without specifying exact line numbers. The auto-placement algorithm inserts the item wherever it fits and stretches it downward by two rows. Items that follow are pushed into the next available cells.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row: span 2;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row span 2 example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div class="box">4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
    </div>
  </body>
</html>
Try it Yourself »

When to use grid-row

Reach for grid-row when an item must occupy a specific vertical slice of the grid rather than the single cell auto-placement would give it. Common use cases:

  • Full-height sidebar or hero panel: grid-row: 1 / -1 stretches an item from the first to the last explicit row line.
  • Featured tile in a card grid: grid-row: span 2 makes one card visually taller than its neighbours.
  • Pinning to an explicit line: grid-row: 2 / 4 keeps an element in a fixed vertical position even as surrounding content changes.

To control horizontal placement, use the matching grid-column property. To set both axes at once, the grid-area shorthand combines grid-row and grid-column into a single declaration. To define how the grid creates rows automatically, see grid-template-rows and grid-auto-rows.

Gotcha: line numbers count the lines between tracks, not the tracks themselves. A three-row grid has four row lines (1–4). Negative numbers count from the end: -1 is the last explicit line, -2 is the second-to-last, and so on. If grid-row references a line beyond the explicit grid, the browser adds implicit rows sized by grid-auto-rows.

Values

ValueDescription
<line>An integer (positive or negative) referencing a specific row grid line.
span <n>The item spans n row tracks. Can be used as the start or end value.
autoThe default — placement and span are determined by the auto-placement algorithm (one row).
initialResets the property to its initial value (auto).
inheritInherits the value from the parent element.

Practice

Practice
In CSS, what does the 'grid-row' property specify?
In CSS, what does the 'grid-row' property specify?
Was this page helpful?