gap
Sets the distance between rows and columns in grid, flex, or multi-column layouts. It is a shorthand for row-gap and column-gap.
Quick example
.flex-container {
display: flex;
gap: 1.5rem;
/* sets equal gap between all flex items */
}
.grid-container {
display: grid;
gap: 20px 40px;
/* row-gap: 20px, column-gap: 40px */
}Quick facts
Initial value
See individual propertiesInherited
No
Applies to
multi-column elements, flex containers, and grid containers
Values
row-gapcolumn-gap gap Browser Support
Widely available Since 2017 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.
Safe to use without fallbacks.
57+
52+
10.1+
16+