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);

/* <line-width> values */
column-gap: thin;
column-gap: medium;
column-gap: thick;

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

Values

This property is specified as either a <length-percentage>, <line-width>, or the keyword normal:

normal

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

<line-width>

A <line-width>: one of the keywords thin, medium, or thick, or a positive <length> value.

<length-percentage>

A non-negative <length> or <percentage> value. Percentages are relative to the inline-size of the content box.

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 or rule shorthand properties, it will appear in the middle of the gap, but has no effect on the size of the gaps between the column.

The column-gap, along with the row-gap property, can also be set using the gap shorthand property which sets both the row-gap and column-gap in one declaration, in that order.

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

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

This example demonstrates using the column-gap property to create horizontal space between adjacent flex items.

HTML

We include six items in a container element:

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

CSS

We set the display property to flex and flex-flow to row wrap to create a flex container with rows of flex items, allowing flex items to flow onto new lines if needed. The flex items are each set to be either 200px or 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. We also add a column-rule, which will draw a thin, solid, magenta line in the middle of the gap.

.flexbox {
  display: flex;
  flex-flow: row wrap;
  height: 100px;
  column-rule: 1px solid magenta;

  column-gap: 20px;
}

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

Result

To set vertical space between flex rows, specify a non-zero value for the row-gap property, optionally setting both the column-gap and row-gap using the gap shorthand.

Grid layout

This example demonstrates using the column-gap property with a <percentage> value in a grid layout. It also demonstrates how the column-gap size is not effected by the size of the column rule.

HTML

We include seven items in a container element:

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

CSS

We set the display property to grid, the width to 400px and grid-template-columns to repeat(3, 1fr), to create a 400px-wide grid container with three columns and as many rows as needed. Each row is 100px tall, as defined by the grid-template-rows property. Every odd grid item is lime with the even grid items being semi-opaque.

The column-gap is set to 5%, which will create a gap that is 20px wide. We've also set a very wide, semi-opaque column-rule to demonstrate how the rule is painted behind the content, with the width of the rule having no impact on the size of the gap.

#grid {
  display: grid;
  width: 400px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  column-rule: 30px solid #ff00ff33;

  column-gap: 5%;
}

#grid > div {
  outline: 1px solid green;
  background-color: lime;
}
#grid > div:nth-of-type(even) {
  background-color: #00ff0033;
}

Result

The column rule is wider than the column gap, and is only visible when the items drawn on top are semi-transparent.s

Multi-column layout

This example demonstrates using the column-gap property with a <line-width> keyword value in a multi-col layout.

HTML

<p class="content-box">
  This is some multi-column text with a thin column gap created with the CSS
  `column-gap` property. The `normal` default value for the `column-gap`
  property in multi-col layout is 1em.
</p>

CSS

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

@layer no-support {
  @supports not (column-gap: thick) {
    body::before {
      content: "Your browser doesn't support the <line-width> keyword values";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Result

Specifications

Browser compatibility

See also

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