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.
It is documented as part of the CSS Box Alignment specification.
Syntax
/* Usage 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 */
}
/* Syntax */
gap: row-gap;
gap: column-gap;
/* Global values */
gap: inherit;
gap: initial;
gap: revert;
gap: revert-layer;
gap: unset;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.
57+
52+
10.1+
16+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more