📐 CSS column-width — Complete Tutorial

🌐 What Is column-width?

The column-width property defines the ideal widthof each column in a CSS Multi-Column Layout. The browser uses this value to determine **how many columns** can fit inside a container.

>>“column-width doesn’t force a fixed number of columns — it suggests a width, and the browser calculates the right column count.”

Note

✔ Defines preferred column width (not exact)
✔ Browser decides number of columns based on space
✔ Works with column-count (browser balances both)
✔ Perfect for responsive multi-column layouts

📦 Syntax

column-width syntax

column-width: auto | <length>;
ValueDescription
autoBrowser decides the width (default)
<length>Desired width per column (px, rem, em, etc.)

📌 1. Basic Example — Ideal Column Width

Basic usage

.content {
  column-width: 200px;
}

The browser creates as many 200px-wide columns as will fit.

📌 2. Combining column-width With column-gap

Width + gap

.article {
  column-width: 250px;
  column-gap: 40px;
}

Column gaps are added between each generated column.

📌 3. Combining With column-count

Column width + count

.layout {
  column-width: 220px;
  column-count: 3;
}

Browser uses both values to calculate the best layout. If space is tight, it may reduce the number of columns.

Note

column-count overrides when necessary — it forces a max number of columns.

📌 4. Fully Responsive Multi-Column Layout

Responsive text columns

.responsive {
  column-width: 300px;
  column-gap: 30px;
}

@media (max-width: 900px) {
  .responsive {
    column-width: 200px;
  }
}

@media (max-width: 600px) {
  .responsive {
    column-width: 150px;
  }
}

Column width adjusts at breakpoints → browser recalculates column count.

📌 5. Using column-width for Masonry-Style Layouts

Masonry-like

.gallery {
  column-width: 250px;
  column-gap: 1.2rem;
}

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

Perfect for Pinterest-style layouts without JavaScript.

📌 6. Wide Containers Automatically Add More Columns

Auto column count

.columns {
  column-width: 180px;
}

If container width increases, more columns are automatically added.

📌 7. Narrow Containers Reduce Column Count

Auto adjustment

.narrow {
  column-width: 200px;
}

If the container shrinks, fewer columns are displayed.

📌 8. Supporting Smooth Reading With break-inside

Avoid breaking elements

.card {
  break-inside: avoid;
}

Prevents awkward splits of headings, images, or cards across columns.

🧪 Real-World Examples

1️⃣ Magazine Text Layout

Magazine style

.magazine {
  column-width: 250px;
  column-gap: 30px;
}

2️⃣ Multi-Column Footer Lists

Footer columns

.footer-links {
  column-width: 180px;
  column-gap: 20px;
}

3️⃣ Product Listing Grid (Masonry-Style)

Product layout

.products {
  column-width: 220px;
  column-gap: 2rem;
}

.product {
  break-inside: avoid;
}

⚠️ Common Mistakes

  • ❌ Assuming column-width creates fixed columns (it only sets ideal width)
  • ❌ Forgetting that browser may add or remove columns on resize
  • ❌ Using too small widths → too many hard-to-read columns
  • ❌ Combining with small column-gap → cramped layouts

Note

For total control of columns (rows + alignment), use CSS Grid. Multi-column layout is best for flowing text and masonry-style patterns.

🔥 Summary

The column-width property defines the preferred width of each column in a multi-column layout. The browser uses this value to determine how many columns can fit, providing a flexible and responsive approach to text and card layouts.

>>“Let the browser decide column count while you focus on designing readability.”

Learn more →MDN Docs 📘