📰 CSS column-count: Splitting Content into Multiple Columns

In magazine-style layouts or newspaper-like designs, content often flows across multiple vertical columns. With CSS, you can easily achieve this using the column-count property, which tells the browser how many columns you want the content to be split into.

---

🧾 What is column-count?

The column-count property specifies the number of columns an element’s content should be divided into. It belongs to the CSS Multi-column Layout Module and works well for text-heavy elements like articles or lists.

---

🧬 Syntax

selector {
  column-count: <number>;
}

Values:

Value	Description
<number>	The number of columns (e.g. 2, 3, 4)
auto	Default. Browser decides how to layout content

---

🎯 Examples

1. Split text into two columns

.article {
  column-count: 2;
}

<div class="article">
  <p>This is paragraph one...</p>
  <p>This is paragraph two...</p>
</div>

The text will be split into 2 vertical columns within .article.

---

2. Three-column layout with spacing

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

Adds space between columns using column-gap.

---

🧠 How It Works

• column-count splits content vertically across the specified number of columns.
• The height of each column is automatically balanced.
• Works best with block-level elements (like <div>, <section>, <p>).
• Text flows from the left column to the right, just like reading a book.

---

🔧 Optional Related Properties

• column-gap — Space between columns (default is normal)
• column-rule — A line (like a border) between columns
• column-width — Preferred minimum width of each column
• columns — A shorthand for setting column-count and column-width

---

🛠️ Best Practices

• Use for long, flowing content to improve readability and aesthetic.
• Avoid putting complex elements (e.g. images, tables) in columns without testing layout flow.
• Combine with media queries to adapt column count on different screen sizes:

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

---

✅ Browser Support

column-count is supported in all modern browsers:

• ✅ Chrome
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Opera
• ⚠️ Partial support in Internet Explorer (no column-gap or column-rule before IE10)

---

🔚 Conclusion

The CSS column-count property is a simple yet powerful way to split content into multiple columns, mimicking print-style layouts on the web. It improves text flow and makes dense content easier to scan and read.

---