Column-gap

The CSS column-gap property sets space (also called “gutters”) between between columns in CSS Grid, Flexbox, and CSS Columns layouts.

Context

If you’re wondering why we have a column-gap property when there’s already a grid-column-gap one, you’re not alone! In fact, column-gap effectively replaces grid-column-gap. By dropping the grid- prefix, it’s a lot more clear that we can control gaps in more situations than CSS Grid.

Yeah, it’s a bit of a headache if you’ve already been working with grid-column-gap because you now have to declare both for the widest browser support until browsers catch up to the change. So, a “future-proof” implementation might look something like this, where browsers that support column-gap will use it and browsers that do not support will skip it and use grid-column-gap instead.

.something {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  column-gap: 25px;
}

Syntax

column-gap: normal | <length-percentage>

Initial value: normal
Applies to: multi-column containers, flex containers, grid containers
Inherited: no
Percentages: refer to corresponding dimension of the content area
Computed value: specified keyword, else a compute <length-percentage> value
Animation type: by computed value type

That formal syntax is basically saying the column-gap either accepts a normal value (which is the default) or a length value that’s specified either as a unit (e.g. 25px or 1.25em) or a percentage (e.g. 10%).

Values

Aside from the normal value, row-gap accepts numbers and percentages. “Normal” means whatever is standard for the browser.

/* Default value */
column-gap: normal;

/* <length> values */
column-gap: 50px;
column-gap: 2rem;
column-gap: 1.5em;
column-gap: 5vw;
column-gap: 25ch;

/* <percentage> value */
column-gap: 15%;

/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: unset;