gap
The gap property sets the spacing between rows and columns in flex, grid, and multi-column layouts.
Syntax
gap: <row-gap> <column-gap>; /* e.g. gap: 1rem 2rem */
Examples
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
Output
Renders a three-column grid with a consistent 1rem gutter between all rows and columns.
Notes
A single value sets both row and column gap. Gap applies only between items, never on the outer edges, making it cleaner than margins for spacing. Fully supported in flexbox since 2021.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 84 |
| firefox | 63 |
| safari | 14.1 |
| edge | 84 |