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.
Item 2 has a grid-row-end value of 4, that is, the item ends before row 4.
<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>
grid-row-end: auto | span n | row-line;
| 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 |
Click the buttons to see the different grid-row-end values.
<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>
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 |
