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.
Item 3 has grid-row set to 2 / span 3.
It starts on row 2 and covers 3 rows.
<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>
The grid-row property is a shorthand property for:
grid-row: grid-row-start [grid-row-end | span n] ;
| 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.
Item #1 starts at row 1 and ends before row 5.
<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>
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 |
