Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

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

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.

Guides