column-gap CSS property

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: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Syntax

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

/* <length-percentage> values */
column-gap: 3px;
column-gap: 2.5em;
column-gap: 3%;
column-gap: calc(3% - 6px);

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

Values

normal

For multi-column layout, resolves to 1em; otherwise 0. This is the default value.

<length>

The size of the gap between columns, as a non-negative <length> value.

<percentage>

The size of the gap between columns, defined as a non-negative <percentage> value.

Description

The column-gap property sets the size of the gap between an element's columns. The property specifies a fixed-length gutter between items in a container, separating boxes in the container's inline axis. Negative values are invalid. The default value normal resolves to 1em on multi-column containers, and 0 everywhere else.

Percentages are calculated against the content box size of the container element's inline axis when this size is definite, against 0 otherwise, except in grid layout, for which cyclic percentage sizes resolve against zero for determining intrinsic size contributions but resolve against the element's content box when laying out the contents.

The column gap may contain a visible separator as a gap decoration. If there is a rule between the columns, set with the column-rule property or rule shorthand, it will appear in the middle of the gap, but has no effect on the size of the gaps between the column.

A legacy grid-column-gap is an alias for column-gap. It was initially defined in grid layout for creating gaps between grid columns.

The column-gap, along with the row-gap property, can also be set using the gap shorthand.

Formal definition

Formal syntax

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

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

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

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

<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.

.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

Grid layout

HTML

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <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

Browser compatibility

See also

• row-gap
• gap
• Basic concepts of grid layout: gutters
• Styling Columns
• CSS gaps module