column-gap

Avatar of Geoff Graham
Geoff Graham on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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;

Demo

Browser support

Browser support can be split up by whether or not row-gap is supported by CSS Grid or Flexbox.

Grid layout support

IEEdgeFirefoxChromeSafariOpera
No16+61+66+12.1+53+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mini
85+79+81+12+All
Source: caniuse

Flexbox layout support

IEEdgeFirefoxChromeSafariOpera
No84+63+85+No70+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mini
85+79+NoNoAll
Source: caniuse

Further reading