The row-gap property specifies the space between rows.
The gap value can be any length value, including percentages.
A flex layout with a row-gap of 25 pixels.
<style>
.flex {
background-color: #776fac;
padding: 5px;
display: flex;
flex-wrap: wrap;
row-gap: 25px;
}
.flex > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
width: 100px;
}
</style>
<div class="flex">
<div>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>13</div>
</div>
row-gap: length | normal | initial | inherit;
| Value | Description |
|---|---|
| length | Row gap width any length value or percentage. |
| normal | Default. Sets a normal row gap, which is 1em. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see different row-gap values.
<style>
.flex-row-gap {
background-color: #776fac;
padding: 5px;
display: flex;
flex-wrap: wrap;
row-gap: normal;
}
.flex-row-gap > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
width: 100px;
}
</style>
<div class="flex-row-gap">
<div>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>13</div>
</div>
This table shows when row-gap support started for each browser.
 Chrome
|
50.0 | Apr 2016 |
 Firefox
|
52.0 | Mar 2017 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
37.0 | May 2016 |
 Safari
|
9.0 | Sep 2015 |
