column-gap
Sets the size of the gap (gutter) between columns in multi-column, flex, or grid layouts.
Quick example
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 24px;
/* adds 24px of clear space between the columns */
}Quick facts
Initial value
normalInherited
No
Applies to
multi-column elements, flex containers, and grid containers
Animation type
lpc
Values
normal column-gap Browser Support
Widely available Since 2017 96% 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.
1+
1.5+
3+
12+