📏 CSS column-gap — Complete Tutorial

🌐 What Is column-gap?

The column-gap property (also known as gap between columns) controls the **space between columns** in a multi-column layout. It works similar to gap in Grid/Flexbox but specifically for CSS Multi-Column Layout.

>>“column-gap defines how much breathing room your columns should have.”

Note

✔ Applies only when using Multi-Column Layout
✔ Accepts any length value (px, rem, em, etc.)
✔ Default gap is browser-dependent

📦 Syntax

column-gap syntax

column-gap: normal | <length>;
ValueDescription
normalBrowser default gap (usually around 1em)
<length>Custom gap size such as 20px, 1.5rem, 5%

📌 1. Basic Example — Add Space Between Columns

Two columns with gap

.content {
  column-count: 2;
  column-gap: 40px;
}

Creates a 40px space between the two columns.

📌 2. Using normal (Browser Default)

Default column gap

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

Lets the browser decide the best spacing (usually ~1em).

📌 3. Using Small Gaps

Small gap

.narrow {
  column-count: 3;
  column-gap: 10px;
}

Useful for compact layouts where space is limited.

📌 4. Extra-Wide Column Gaps

Wide layout

.wide {
  column-count: 3;
  column-gap: 80px;
}

Creates spacious, magazine-style layouts.

📌 5. column-gap With column-rule

Gap + rule

.content {
  column-count: 2;
  column-gap: 50px;
  column-rule: 2px solid #ccc;
}

Gap controls spacing, while column-rule draws a divider line.

📌 6. Responsive Column Gaps

Responsive gap

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

@media (max-width: 700px) {
  .responsive {
    column-gap: 20px;
  }
}

@media (max-width: 500px) {
  .responsive {
    column-gap: 10px;
  }
}

Adjust gaps based on screen width for better readability.

📌 7. Combining With column-width

Width + gap

.text {
  column-width: 200px;
  column-gap: 30px;
}

Browser decides how many columns fit, and column-gap controls spacing.

📌 8. Using column-gap in Masonry-Style Image Gallery

Gallery

.gallery {
  column-count: 4;
  column-gap: 1.5rem;
}

.gallery img {
  width: 100%;
  margin-bottom: 1.5rem;
}

Creates Pinterest-like layouts with consistent spacing.

🧪 Real-World Examples

1️⃣ Newspaper Column Layout

Newspaper layout

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

2️⃣ Multi-Column Footer Links

Footer columns

.footer-links {
  column-count: 4;
  column-gap: 25px;
}

3️⃣ FAQ Layout With Two Columns

FAQ layout

.faq {
  column-count: 2;
  column-gap: 50px;
}

⚠️ Common Mistakes

  • ❌ Expecting column-gap to affect Grid or Flex layouts (it does not)
  • ❌ Using very small gaps → decreases readability
  • ❌ Using percentage gaps inside narrow containers → unpredictable spacing

Note

If you're working with Grid or Flexbox, use gap instead of column-gap.

🔥 Summary

column-gap defines the spacing between columns in a multi-column layout. It gives you precise control over readability, spacing style, and layout density. Perfect for magazines, blogs, galleries, and documentation designs.

>>“Good column spacing creates visual rhythm and makes content easier to read.”

Learn more →MDN Docs 📘