📚 CSS column-count — Complete Tutorial

🌐 What Is column-count?

The column-count property is part of CSS Multi-Column Layout. It allows you to split content inside a block into **multiple columns**, similar to newspaper or magazine layouts.

>>“column-count turns long text into elegant multi-column layouts without extra markup.”

Note

✔ Great for long paragraphs
✔ Automatic column balancing
✔ Works with column-gap, column-rule, column-width

📦 Syntax

column-count syntax

column-count: auto | <number>;
ValueDescription
autoBrowser chooses number of columns automatically (default)
<number>Exact number of columns you want

📌 1. Basic Example — Split into 2 Columns

Two columns

.content {
  column-count: 2;
}

The text inside .content is divided into two balanced columns.

📌 2. Three-Column Layout

Three columns

.article {
  column-count: 3;
}

Useful for magazine-inspired designs.

📌 3. Combine With column-gap

Column gap

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

Controls space between columns.

📌 4. Add Column Borders Using column-rule

Column borders

.content {
  column-count: 2;
  column-rule: 3px solid #555;
}

Creates a dividing line between columns.

📌 5. Using column-count With Images & Cards

Masonry-like layout

.gallery {
  column-count: 3;
  column-gap: 1rem;
}

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

Creates a Pinterest-like multi-column layout.

📌 6. Responsive Multi-Column Layout

Responsive columns

.content {
  column-count: 3;
}

@media (max-width: 700px) {
  .content {
    column-count: 2;
  }
}

@media (max-width: 500px) {
  .content {
    column-count: 1;
  }
}

Adjusts column count based on screen size.

📌 7. Using column-count with column-width

If both are defined, the browser chooses the best combination.

column-count + column-width

.text {
  column-count: 4;
  column-width: 200px;
}

📌 8. Prevent Column Breaks Inside Elements

Avoid breaking

h2, img {
  break-inside: avoid;
}

Prevents titles or images from splitting across columns.

📌 9. Using column-count For Lists

Split list items

ul {
  column-count: 3;
  column-gap: 2rem;
}

Useful for menus, footers, tag clouds, etc.

🧪 Real-World Examples

1️⃣ Newspaper Article Style

Newspaper layout

.news {
  column-count: 3;
  column-gap: 30px;
  column-rule: 2px solid #ccc;
}

2️⃣ Multi-Column Blog Content

Blog layout

.blog-content {
  column-count: 2;
  line-height: 1.6;
}

3️⃣ Multi-Column Footer Links

Footer columns

.footer-links {
  column-count: 4;
}

.footer-links li {
  break-inside: avoid;
}

⚠️ Common Mistakes

  • ❌ Expecting fixed column heights (CSS auto-balances them)
  • ❌ Using float — not needed for multi-columns
  • ❌ Expecting Grid-like behavior (multi-column ≠ grid)
  • ❌ Not controlling breaks for images/headings

Note

Use break-inside: avoid on elements you don’t want splitting across columns.

🔥 Summary

The column-count property makes it easy to create multi-column layouts similar to print media. It works well for text-heavy content, galleries, lists, and responsive designs. When combined with other multi-column properties likecolumn-gap, column-rule, and break-inside, you get clean and flexible layouts with minimal code.

>>“Multi-column layouts give your text flow, elegance, and readability — with almost no effort.”

Learn more →MDN Docs 📘