CSS propertyFlexbox
column-gap
Sets the spacing between columns in a flex, grid, or multi-column container.
- Initial value
normal- Inherited
- No
- Animatable
- yes, as a length or percentage
- Applies to
- flex, grid, and multi-column containers
- JavaScript
element.style.columnGap = "24px"
Example
#CSS
.article {
columns: 2;
column-gap: 32px;
}Example HTML
<div class="article stage">Text split into two columns like in a newspaper. column-gap sets the spacing between the columns. Longer paragraphs flow from the first column into the second all on their own, with no extra code.</div>Preview
Definition and usage
#The column-gap property sets the spacing between columns, which is horizontal in the normal writing direction. In Flexbox that’s the spacing between items on a single line.
It also works in a multi-column layout (columns), where the default value normal means a gap of 1em. In Flexbox and Grid, normal means zero.
The older name grid-column-gap is still supported as an alias, but new code should use column-gap.
Syntax
#Syntax
column-gap: normal | <length> | <percentage>;Values
#Values in practice
#normal
In Flexbox this means no gap.
.demo { column-gap: normal; }10px
A small gap between columns.
.demo { column-gap: 10px; }40px
A large gap between columns.
.demo { column-gap: 40px; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- In multi-column text, give the columns a clear gap of at least 2em, so the eye doesn’t jump into the neighboring column.
- For separate spacing on both axes, use the shorthand
gap: <rows> <columns>.
Related entries
#- gapSets the spacing between items in a flex, grid, or multi-column container.
- row-gapSets the spacing between rows in a flex or grid container.
- grid-template-columnsDefines the grid’s columns: their number and widths.
- columnsSplits an element’s content into columns like a newspaper. A shorthand for column-width and column-count.
Spotted a mistake or missing an example? Write to us.