column-gap (grid-column-gap)

The column-gap CSS property sets the size of the gap (gutter) between an element's columns.

Initially a part of Multi-column Layout, the definition of column-gap has been broadened to include multiple layout methods. Now specified in Box Alignment, it may be used in Multi-column, Flexible Box, and Grid layouts.

Syntax

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

/* <length> values */
column-gap: 3px;
column-gap: 2.5em;

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

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

The column-gap property is specified as one of the values listed below.

Values

normal
The browser's default spacing is used between columns. For multi-column layout this is specified as 1em. For all other layout types it is 0.
<length>
The size of the gap between columns, defined as a <length>. The <length> property's value must be non-negative.
<percentage>
The size of the gap between columns, defined as a <percentage>. The <percentage> property's value must be non-negative.

Formal definition

Initial valuenormal
Applies tomulti-column elements, flex containers, grid containers
Inheritedno
Percentagesrefer to corresponding dimension of the content area
Computed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typea length, percentage or calc();

Formal syntax

normal | <length-percentage>

where
<length-percentage> = <length> | <percentage>

Examples

Flex layout

HTML

<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: auto;
}

Result

Grid layout

HTML

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  column-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

Result

Multi-column layout

HTML

<p class="content-box">
  This is some multi-column text with a 40px column
  gap created with the CSS `column-gap` property.
  Don't you think that's fun and exciting? I sure do!
</p>

CSS

.content-box {
  column-count: 3;
  column-gap: 40px;
}

Result

Specifications

Specification Status Comment
CSS Box Alignment Module Level 3
The definition of 'column-gap' in that specification.
Working Draft Applies to grid and flexbox
CSS Grid Layout
The definition of 'column-gap' in that specification.
Candidate Recommendation Specifies how this property affects grid layouts
CSS Multi-column Layout Module
The definition of 'column-gap' in that specification.
Working Draft Initial definition

Browser compatibility

Support in Flex layout

BCD tables only load in the browser

Support in Grid layout

BCD tables only load in the browser

Support in Multi-column layout

BCD tables only load in the browser

See also