📰 columns — Multi-Column Layout Made Easy in CSS

🌐 What is columns?

The columns property is a shorthand that allows you to define multi-column layouts effortlessly—similar to newspaper or magazine layouts. It combines two longhand properties:

  • column-width — Ideal width of each column
  • column-count — Number of columns desired
>>“Use columns when you want text to flow into multiple vertical sections automatically.”

Note

✔ Great for long text, articles, side-by-side content
✔ Automatically balances column height
✔ No need for flex or grid

🎯 Why Use columns?

  • Create magazine-like layouts
  • Make text easier to read on large screens
  • Automatically evenly distribute content
  • No need for extra markup to create multiple columns

📌 Syntax

columns Syntax

columns: <column-width> || <column-count>;

Either value can be omitted — the browser will calculate the missing side.

🎨 Example 1 — Set Column Count

3 Columns Example

.article {
  columns: 3;
}

The text will flow into 3 evenly sized columns.

🎨 Example 2 — Set Column Width

Column Width Example

.article {
  columns: 200px;
}

The browser will add as many 200px columns as can fit.

🎨 Example 3 — Width + Count Together

Combined Example

.article {
  columns: 250px 3;
}

Means: Try to make 3 columns, each ideally 250px wide. The browser adjusts based on available space.

📐 Related Multi-Column Properties

PropertyDescription
column-gapSpacing between columns
column-ruleBorder line between columns
column-spanMake an element span across all columns
column-fillBalance or not balance the column heights

🧪 Example 4 — Adding Column Gap & Rule

Gap + Rule

.article {
  columns: 3;
  column-gap: 2rem;
  column-rule: 1px solid #ccc;
}

Creates professional magazine-style separation.

🧪 Example 5 — Headline Spanning All Columns

column-span Example

h2 {
  column-span: all;
}

Perfect for section headings inside multi-column text.

🧠 How Columns Behave

  • Browser automatically balances column heights
  • Content flows left-to-right, top-to-bottom (depends on writing mode)
  • No extra wrappers needed — columns are generated purely by CSS
  • Columns adjust responsively as screen size changes

Note

💡 Multi-column layout is best for flowing text, not for complex layouts → For that, use CSS Grid or Flexbox.

📱 Responsive Columns Example

Responsive Columns

.article {
  columns: 300px;
}

@media (max-width: 700px) {
  .article {
    columns: 1;
  }
}

On wide screens → multiple columns On small screens → single column for readability

⚠️ Common Mistakes

  • ❌ Expecting columns to align like grid/flex items
  • ❌ Trying to position elements inside each column manually
  • ❌ Forgetting that images and long unbreakable content may overflow
  • ❌ Using columns for interactive card layouts → Not recommended

Note

🧠 Multi-column layout is designed for flowing text, not block alignment.

🔥 Summary

The columns shorthand makes it extremely simple to create multi-column text layouts similar to magazines and newspapers. Combined with properties like column-gap and column-rule, you can design elegant, readable, and professionally styled content areas.

>>“Use columns when your content is text-heavy and needs a clean, readable flow.”

Learn more →MDN Docs 📘