CSS column-count Property

CSS column-count Property

The column-count property in CSS defines the number of columns an element should be divided into in a multi-column layout. It allows text to flow automatically into multiple columns, similar to how newspapers or magazines format content.

1. Syntax

selector {
  column-count: number | auto;
}

Value	Description
<number>	Specifies the number of columns (e.g., 2, 3, 4).
auto (default)	The browser determines the column count automatically.

2. Example – Creating a Multi-Column Layout

.columns {
  column-count: 3;
}

<div class="columns">
  <p>This text will be divided into three columns.</p>
  <p>Each column will have an equal width.</p>
</div>

✅ The text automatically splits into three columns.

3. Example – Responsive Columns with column-count

.columns {
  column-count: 4;
}

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

✅ Displays 4 columns on larger screens and 2 columns on smaller screens.

4. Example – Using column-count: auto;

.columns {
  column-count: auto;
}

✅ The browser automatically decides the best number of columns.

5. Best Practices

✔ Use column-count for readable, magazine-like layouts.
✔ Combine with column-gap for better spacing.
✔ Use media queries to adjust columns on different screen sizes.