column-gap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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 CSS box alignment, it may be used in multi-column, flexible box, and grid layouts.

Early versions of the specification called this property grid-column-gap, and to maintain compatibility with legacy websites, browsers will still accept grid-column-gap as an alias for column-gap.

Try it

column-gap: 0;

column-gap: 10%;

column-gap: 1em;

column-gap: 20px;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 200px;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
}

Syntax

css
/* 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: revert-layer;
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

column-gap = 
  normal                     |
  <length-percentage [0,∞]>  

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

Examples

Flex layout

In this example, a flex container contains six flex items of two different widths (200px and 300px), creating flex items that are not laid out as a grid. The column-gap property is used to add horizontal space between the adjacent flex items.

HTML

html
<div class="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

To create a flex container, we set its display property value to flex. We then use the flex-flow shorthand property to set the flex-direction to row (the default) and flex-wrap to wrap, allowing the flex items to flow onto new lines if needed. By default, flex items stretch to be as tall as their container. By setting a height, even the empty flex items will be 100px tall.

To better demonstrate the column-gap property, the flex items in this example have two different width values. The width of the flex items is set within the <div> flex items. We use the flex-basis component of the flex shorthand property to make all the flex items 200px wide. We then target every third flex item by using the :nth-of-type(3n) selector, widening them to 300px.

The column-gap value is set as 20px on the flex container to create a 20px gap between the adjacent flex items in each row.

css
.flexbox {
  display: flex;
  flex-flow: row wrap;
  height: 100px;
  column-gap: 20px;
}

.flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 200px;
}
div:nth-of-type(3n) {
  flex: 300px;
}

Result

Note: While there is horizontal space between adjacent flex items in each flex row, there is no space between the rows. To set vertical space between flex rows, you can specify a non-zero value for the row-gap property. The gap shorthand property is also available to set both the row-gap and column-gap in one declaration, in that order.

Grid layout

HTML

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

CSS

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

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

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

Result

Specifications

Specification
CSS Box Alignment Module Level 3
# column-row-gap
CSS Grid Layout Module Level 2
# gutters
CSS Multi-column Layout Module Level 1
# column-gap

Browser compatibility

See also