Tag column-gap

🧱 CSS column-gap: Controlling Space Between Columns

When working with multi-column layouts in CSS — like magazine articles, blogs, or side-by-side content — spacing matters. The column-gap property allows you to define the amount of space between vertical columns, giving your layout breathing room and better readability.

🧾 What is column-gap?

The column-gap property sets the horizontal space between columns in a multi-column layout. It’s part of the CSS Multi-column Layout Module and is especially useful when used alongside column-count or column-width.

🧬 Syntax

selector {
  column-gap: <length> | normal;
}

Values:

ValueDescription
<length>Specifies the gap between columns (e.g., 20px, 1em)
normalBrowser-defined default spacing (usually around 1em, varies by browser)

🎯 Examples

1. Add space between two columns

.article {
  column-count: 2;
  column-gap: 30px;
}

This splits content into two columns with 30 pixels of space between them.

2. Use default gap with normal

.magazine {
  column-count: 3;
  column-gap: normal;
}

Uses the browser’s default spacing between columns.

📌 Visual Example

Here’s how it might look:

<div class="columns">
  <p>Paragraph 1...</p>
  <p>Paragraph 2...</p>
</div>
.columns {
  column-count: 2;
  column-gap: 40px;
}

🧾 The result: two columns with 40px of space between them, making the text more readable.

🧠 How It Works

  • Works only with multi-column elements (those using column-count or column-width).
  • Does not affect margin or padding between child elements — only the space between columns.
  • Can be animated or transitioned for dynamic layout effects.

🛠️ Best Practices

  • Use larger gaps (20–40px) for body text to enhance readability.
  • Use consistent column-gap values across components for a unified look.
  • Combine with column-rule to visually separate columns with a line:
.container {
  column-count: 2;
  column-gap: 30px;
  column-rule: 1px solid #ccc;
}

✅ Browser Support

column-gap is widely supported in all modern browsers:

  • ✅ Chrome
  • ✅ Firefox
  • ✅ Safari
  • ✅ Edge
  • ✅ Opera
  • ✅ Internet Explorer 10+ (as -ms-column-gap in older versions)

🔚 Conclusion

The CSS column-gap property provides fine-grained control over spacing between columns in multi-column layouts. It’s a small but essential tool in creating clean, readable, and responsive designs.