row-gap and column-gap
The row-gap and column-gap properties set the gutter size between grid and flex tracks independently.
Syntax
row-gap: <length|%>;
column-gap: <length|%>;
Examples
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 2rem;
column-gap: 1rem;
}
Output
Renders a four-column grid with wider 2rem vertical gutters and narrower 1rem horizontal gutters.
Notes
These are the longhands of the gap shorthand. row-gap controls spacing between rows; column-gap between columns. They apply to grid, flexbox, and multi-column layouts and never add outer edge spacing.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 84 |
| firefox | 63 |
| safari | 14.1 |
| edge | 84 |