CSS column-gap Property

What You’ll Learn

The column-gap property sets the space between columns in a multi-column layout — helping content stay readable and visually organized.

Definition and Usage

The column-gap CSS property sets the width of the gap (space) between columns in a multi-column layout. It helps create visually appealing layouts by controlling the space between columns, ensuring content is easily readable and well organized.

Apply it to any block container that uses column-count or column-width. A comfortable gap prevents text in neighboring columns from feeling crowded.

📝 Syntax

The syntax for column-gap is simple — apply it to any multi-column element:

selector {
  column-gap: value;
}

Basic Example

.column-layout {
  column-count: 3;
  column-gap: 20px;
}

Syntax Rules

• The initial value is normal.
• Accepts length values: px, em, rem, %, and others.
• Requires a multi-column context — use with column-count or column-width.
• Only affects horizontal space between columns, not vertical spacing.
• Also used for column gaps in CSS Grid (separate from multi-column layout context).

💎 Property Values

The column-gap property accepts a length or the keyword normal.

Related Multi-Column Properties

column-gap is one piece of the CSS Multi-column Layout module:

• column-count — number of columns
• column-width — minimum column width
• column-rule — divider line drawn in the gap
• column-fill — how content fills columns
• columns — shorthand for width and count

Examples Gallery

Try a 20px gap, compare small vs large gaps, use rem units, and combine gap with column-rule.

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

<div class="column-layout">
  <p>Lorem ipsum dolor sit amet...</p>
  <p>Ut enim ad minim veniam...</p>
</div>

.gap-small {
  column-count: 3;
  column-gap: 8px;
}

.gap-large {
  column-count: 3;
  column-gap: 2.5rem;
}

.article {
  column-count: 2;
  column-gap: 1.5rem;
  max-width: 40rem;
}

<style>
  .magazine {
    column-count: 3;
    column-gap: 1.5rem;
    column-rule: 1px solid #cbd5e1;
  }
</style>

<div class="magazine">...</div>

💡 Best Practices