CSS propertyFlexbox
row-gap
Sets the spacing between rows in a flex or grid container.
- Initial value
normal- Inherited
- No
- Animatable
- yes, as a length or percentage
- Applies to
- flex, grid, and multi-column containers
- JavaScript
element.style.rowGap = "20px"
Example
#CSS
.form {
display: grid;
row-gap: 14px;
}Example HTML
<form class="form stage">
<input placeholder="Name">
<input placeholder="Email">
<button type="submit">Sign up</button>
</form>Preview
Definition and usage
#The row-gap property adds space between consecutive rows, which is vertical spacing in the normal writing direction. In a flex container it only matters once items wrap onto several lines.
It’s part of the gap shorthand. Use it on its own when you only want to change the vertical spacing, for example on smaller screens.
The older name grid-row-gap still works in browsers as an alias, but in new code just write row-gap.
Syntax
#Syntax
row-gap: normal | <length> | <percentage>;Values
#Values in practice
#normal
No gap between rows in Flexbox and Grid.
.demo { row-gap: normal; }8px
A small gap between rows.
.demo { row-gap: 8px; }28px
A large gap between rows, columns unchanged.
.demo { row-gap: 28px; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- The simplest way to set vertical spacing between form fields is
display: gridandrow-gap. - In a single-line flex container,
row-gapdoesn’t change anything, since there’s no second row.
Related entries
#Spotted a mistake or missing an example? Write to us.