CSS column-gap Property

Definition and Usage

The column-gap property sets the size of the gutter between an element's columns. It works in multi-column layout, CSS Grid, and Flexbox. Negative values are invalid.

The initial value is normal: about 1em in multi-column layout, and 0 in Grid and Flexbox. Pair it with column-count or columns for newspaper-style text, or use it on a grid/flex container for track spacing. The gap shorthand can set row-gap and column-gap together.

CSS Syntax

Use a non-negative length (px, em, rem) or a percentage of the container's inline size. Some newer engines also accept thin, medium, and thick; stick to lengths for widest support.

Property Values

How to Use column-gap

Create columns first, then set how much space sits between them.

1. Enable columns with column-count, column-width, or columns—or use a Grid/Flex container.
2. Set column-gap to a length, percentage, or leave normal.
3. Optional: add column-rule to draw a line in the middle of the gutter (it does not change the gap size).
4. For both row and column gutters in Grid/Flex, prefer the gap shorthand.

Live Preview

Three columns of the same text. Change only the gap. A thin rule marks the center of each gutter.

CSS Examples

Each snippet keeps only what column-gap needs. Use Try It Yourself for a live editor.

<style>
  p {
    column-count: 3;
    column-gap: 20px;
  }
</style>

<p>
  London. Michaelmas term lately over…
</p>

<style>
  p {
    column-count: 3;
    column-gap: normal;
  }
</style>

<p>
  London. Michaelmas term lately over…
</p>

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 20px;
  }
</style>

<div class="grid">
  <span>One</span>
  <span>Two</span>
  <span>Three</span>
</div>

Key Takeaways