Column-Count Property
Last updated: 2026-09-13
column-count Column-Count Property
The column-count property specifies the number of columns an element's content is split into. Part of CSS Multi-column Layout, it is typically combined with column-gap and column-rule to produce newspaper-style multi-column typesetting.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
column-count: auto | <integer>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | Computed automatically. |
<integer> | Type | A fixed number of columns. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| column-count | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： When both column-count and column-width are set, column-count acts as the maximum; the actual number of columns may be smaller.
Warning： Too many columns make each one too narrow to read comfortably. Set the count according to content length and container width; usually 2 to 4 columns is appropriate.
❓ FAQ
QWhich takes priority: column-count or column-width?
AWhen both are set, column-count acts as the ceiling: the browser figures out how many columns fit at the given column-width and caps the result at column-count. For example, column-width:200px; column-count:3 yields 3 columns in a 700px container but only 2 in a 450px one; it never forces an extra column. In short, column-width drives the layout and column-count caps it.
QWhy doesn't column-count:3 take effect?
APossible reasons: first, not enough content, because when content is too short the browser shows only as many columns as needed; second, the container's height or width is constrained and cannot fit 3 columns; third, column-width is also set and constrains the count lower; fourth, an old browser without support. Multi-column is content-driven: the count is a target, not a hard guarantee, and more content fills the columns.
QWhat does column-count:auto mean?
Aauto means the column count is not decided by this property; it is left to column-width or the browser. If column-width is set, the count derives from it automatically; if neither is set, content stays in a single column. auto is the default value, so column-count:auto alone has no visible effect; pair it with column-width to enable automatic column flow.
QHow do I control the gap between columns?
AUse column-gap for the spacing, for example column-gap:24px, and column-rule for a divider between columns, for example column-rule:1px solid #ccc. Both only apply to multi-column containers. A gap of 24px to 40px, or 1.5em to 2em, is recommended; too small makes adjacent columns hard to distinguish, and too large wastes space and interrupts the reading line, so tune it against the actual font size.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
columns (Multi-column Shorthand)
The shorthand for column-count and column-width.
column-width
Set the column width.
