W3docs
en
Log in

CSS grid-row Property

Use grid-row property to set the start row end the end row of the item. Definition of the property, values and examples.

The grid-row property is used to specify on which row-line to start the item, and which row-line to end. It is a shorthand for the following properties:

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

Syntax

CSS grid-row syntax

grid-row: grid-row-start / grid-row-end;

Example of the grid-row property:

CSS grid-row code example

<!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

Example of the grid-row property specified as span 2:

CSS grid-row example with two items

<!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 property 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 »

Values

ValueDescription
grid-row-startSpecifies the start position of the item.
grid-row-endSpecifies the end position of the item and the number of rows to span.
initialMakes the property use its default value.
inheritInherits the property from its parents element.

Practice

Practice

In CSS, what does the 'grid-row' property specify?