CSS grid-row Property

The grid-row property sets the start and end row of a grid item.

This setting allows an item to stretch over multiple rows.

The value is either a row number, or the number of rows the item spans.

Example

#

Item 3 has grid-row set to 2 / span 3.
It starts on row 2 and covers 3 rows.

1
2
3
4
5
6
7
8
9
10
11
12
<style>
  .grid-container {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto;
  }

  .grid-container > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px 5px;
    font-size: 18px;
  }
</style>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div style="grid-row: 2 / span 3;
              color: white;
              background-color: salmon;">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div> 

Using grid-row

The grid-row property is a shorthand property for:

Syntax

grid-row: grid-row-start  [grid-row-end | span n] ;

Values

#

Value Description
grid-row-start Sets which row to start displaying the item.
grid-row-end Sets which row to stop displaying the item.
span n The number of rows the item spans (covers).

Note: The end is either specified by a row number, or by the number of rows the item spans.


More Examples

Item #1 starts at row 1 and ends before row 5.

1
2
3
4
5
6
7
8
9
10
11
12
<style>
  .grid-contain {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto;
  }

  .grid-contain > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px 5px;
    font-size: 18px;
  }
</style>

<div class="grid-contain">
  <div style="background-color: salmon;
              color: white;
              grid-row: 1 / 5; ">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div> 

Browser support

This table shows when grid-row support started for each browser.

Chrome
57 Mar 2017
Firefox
52 Mar 2017
IE/Edge
16 Sep 2017
Opera
44 Mar 2017
Safari
10 Sep 2016

You may also like

Guides