CSS column-gap Property

CSS column-gap Property

The column-gap property in CSS sets the space between columns in a multi-column layout. It controls the gap (spacing) between text columns, similar to gap in Flexbox and Grid layouts.

1. Syntax

selector {
  column-gap: value;
}

Value	Description
<length>	Specifies the gap size (e.g., 20px, 2em).
normal (default)	The browser decides on a reasonable gap size.

✅ The default normal value varies by browser but is typically 1em.

2. Example – Setting a Custom Column Gap

.columns {
  column-count: 3;
  column-gap: 40px;
}

<div class="columns">
  <p>This is a multi-column layout with a 40px gap.</p>
  <p>More text continues in different columns.</p>
</div>

✅ Creates three columns with 40px spacing between them.

3. Example – Using normal (Browser Default)

.columns {
  column-count: 2;
  column-gap: normal;
}

✅ The browser automatically determines the optimal spacing.

4. Example – Combining column-gap with column-rule

.columns {
  column-count: 3;
  column-gap: 30px;
  column-rule: 2px solid gray;
}

✅ Adds a 30px gap and a gray divider between columns.

5. Best Practices

✔ Use consistent spacing for readability.
✔ Combine with column-rule for better separation.
✔ Avoid very large gaps that break the content flow.