column-gap

column-gap sets an internal gutter in Grid, Flexbox, and multicol layouts. It does not add spacing around the outside of a container.

Separate grid columns

The 24px gutter lies between the two tracks. Padding around each item is separate.

<div class="grid">
  <p>First track</p>
  <p>Second track</p>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}
.grid p {
  background: #dbeafe;
  padding: 0.75rem;
  margin: 0;
}

Separate items in a horizontal flex row

With flex-direction:row, column-gap separates items along the row. Wrapped lines would use row-gap for the spacing between lines.

<div class="controls">
  <button type="button">One</button><button type="button">Two</button
  ><button type="button">Three</button>
</div>

.controls {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.5rem;
}
button {
  padding: 0.75rem;
  font: inherit;
}

Values and defaults

The initial value is normal and the property is not inherited. In established multicol behavior, normal resolves to 1em; in Grid and Flexbox it resolves to zero. Nonnegative lengths and percentages set an explicit gap. Percentage gaps depend on the container’s content-box inline size and whether that size is definite; cyclic Grid sizing can produce overflow after intrinsic sizing. Prefer a length when those dependencies are unwanted.

Common mistakes

This is not limited to multicol content. In a column-direction flex layout, column-gap separates flex lines, while row-gap separates items; the name does not mean “always horizontal between children.” Item margins and distributed alignment may add visible space beyond the declared gap. The gap shorthand can reset it and takes row-gap first. Newer line-width keywords/gap decorations have value-specific support.

Learn gap, row-gap, and flex-direction.

Sources and browser support

MDN: column-gap describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.