CSS column-count Property

What You’ll Learn

The column-count property splits content into multiple columns — like a newspaper or magazine layout — for better readability on wide screens.

Definition and Usage

The column-count CSS property specifies the number of columns an element should be divided into. It is part of the CSS Multi-column Layout Module, which provides a way to lay out content in multiple columns, similar to newspaper layouts.

This property is useful for creating responsive and visually appealing designs when you have a long block of text or content that should flow across columns rather than one wide paragraph.

📝 Syntax

The syntax for column-count is straightforward — apply it to any block-level container:

selector {
  column-count: number | auto;
}

Basic Example

.multicolumn {
  column-count: 3;
}

Syntax Rules

• The initial value is auto (single column, no splitting).
• Use a positive integer (2, 3, etc.) for a fixed column count.
• Content flows top-to-bottom in the first column, then continues in the next.
• Pair with column-gap and column-rule for spacing and dividers.
• Use media queries to reduce columns on narrow screens.

💎 Property Values

The column-count property accepts a column number or the keyword auto.

Related Multi-Column Properties

column-count is often used together with other properties from the Multi-column Layout module:

• column-gap — space between columns
• column-rule — a line between columns (like a border)
• column-width — minimum column width (browser picks count to fit)
• columns — shorthand for column-width and column-count
• column-fill — how columns are filled (balanced vs. sequential)

Examples Gallery

Try three columns, two columns with gap, responsive column counts, and column rules.

<style>
  .multicolumn {
    column-count: 3;
  }
</style>

<div class="multicolumn">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>

<style>
  .article {
    column-count: 2;
    column-gap: 2rem;
  }
</style>

<article class="article">...</article>

.content {
  column-count: 1;
}

@media (min-width: 768px) {
  .content {
    column-count: 3;
  }
}

<style>
  .magazine {
    column-count: 3;
    column-gap: 1.5rem;
    column-rule: 1px solid #cbd5e1;
  }
</style>

<div class="magazine">...</div>

💡 Best Practices