grid-row-gap
The row-gap CSS property sets the size of the gap (gutter) between an element's grid rows.
Syntax
/* <length> values */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;
/* <percentage> value */
row-gap: 10%;
/* Global values */
row-gap: inherit;
row-gap: initial;
row-gap: unset;
Values
<length-percentage>- Is the width of the gutter separating the rows.
<percentage> values are relative to the dimension of the element.
| Initial value |
normal |
| Applies to |
multi-column elements, flex containers, grid containers |
| Inherited |
no |
| Percentages |
refer to corresponding dimension of the content area |
| Computed value |
as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements |
| Animation type |
a length, percentage or calc(); |
normal | <length-percentage>where
<length-percentage> = <length> | <percentage>
Examples
Flex layout
HTML
<div id="flexbox">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS
#flexbox {
display: flex;
flex-wrap: wrap;
width: 300px;
row-gap: 20px;
}
#flexbox > div {
border: 1px solid green;
background-color: lime;
flex: 1 1 auto;
width: 100px;
height: 50px;
}
Result
Grid layout
HTML
<div id="grid">
<div></div>
<div></div>
<div></div>
</div>
CSS
#grid {
display: grid;
height: 200px;
grid-template-columns: 200px;
grid-template-rows: repeat(3, 1fr);
row-gap: 20px;
}
#grid > div {
border: 1px solid green;
background-color: lime;
}
Result
Specifications
Support in Flex layout
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
| Supported in Flex Layout |
84 |
84 |
63 |
No |
70 |
No |
|
Mobile |
|
Android webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari on iOS |
Samsung Internet |
| Supported in Flex Layout |
84 |
84 |
63 |
No |
No |
No |
Support in Grid layout
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
| Supported in Grid Layout |
66
- 66
- 57
- Uses the non-standard name:
grid-row-gap
- 29
Disabled
- Uses the non-standard name:
grid-row-gap
- Disabled From version 29: this feature is behind the
Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
|
16
- 16
- 16
- Uses the non-standard name:
grid-row-gap
|
61
- 61
- 52
- Uses the non-standard name:
grid-row-gap
- 40 — 59
Disabled
- Uses the non-standard name:
grid-row-gap
- Disabled From version 40 until version 59 (exclusive): this feature is behind the
layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
|
No |
53
- 53
- 44
- Uses the non-standard name:
grid-row-gap
- 28
Disabled
- Uses the non-standard name:
grid-row-gap
- Disabled From version 28: this feature is behind the
Enable experimental Web Platform features preference.
|
12.1
- 12.1
- 10.1
- Uses the non-standard name:
grid-row-gap
|
|
Mobile |
|
Android webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari on iOS |
Samsung Internet |
| Supported in Grid Layout |
66
- 66
- 57
- Uses the non-standard name:
grid-row-gap
|
66
- 66
- 57
- Uses the non-standard name:
grid-row-gap
- 29
Disabled
- Disabled From version 29: this feature is behind the
Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
|
61
- 61
- 52
- Uses the non-standard name:
grid-row-gap
- 40 — 59
Disabled
- Uses the non-standard name:
grid-row-gap
- Disabled From version 40 until version 59 (exclusive): this feature is behind the
layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
|
47
- 47
- 43
- Uses the non-standard name:
grid-row-gap
- 28
Disabled
- Uses the non-standard name:
grid-row-gap
- Disabled From version 28: this feature is behind the
Enable experimental Web Platform features preference.
|
12
- 12
- 10.3
- Uses the non-standard name:
grid-row-gap
|
9.0
- 9.0
- 6.0
- Uses the non-standard name:
grid-row-gap
|
See also