CSS grid-row-end Property

The grid-row-end property sets the end row for a grid item.

The value can also be a range of rows with a span n value

Rows with insufficient or no items will be left blank or empty.

Example

#

Item 2 has a grid-row-end value of 4, that is, the item ends before row 4.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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;
    padding: 10px 5px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="grid-container">
  <div>1</div>
  <div style="background-color: salmon;
              color: white;
              grid-row-end: 4;">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>13</div>
  <div>14</div>
  <div>15</div>
</div>

Syntax

grid-row-end: auto | span n | row-line;

Values

#

Value Description
auto Default. Item follows regular grid flow.
span n Sets the number of rows the item will span. n = integer.
row Sets the row at which to end the display of the item

More Examples

Click the buttons to see the different grid-row-end values.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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;
    padding: 10px 5px;
    text-align: center;
    font-size: 18px;
  }

  .grid-row-end-example {
    background-color: salmon !important;
    color: white;
    grid-row-end: span 3;
  }
</style>

<div class="grid-container">
  <div>1</div>
  <div class="grid-row-end-example">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>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
</div>

Browser support

This table shows when grid-row-end 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