The column-count property breaks an element's content into a fixed number of columns. Content flows down the first column, then continues in the next—like a newspaper or magazine layout.
Use a positive integer such as 2 or 3, or auto when column-width should decide how many columns fit. It applies to block containers (not table wrapper boxes), is not inherited, and the initial value is auto. You can also set it through the columns shorthand.
Not deprecated and not experimental. Multi-column layout (including column-count) has been widely available across browsers since 2017.
column-count: auto | <integer [1,∞]> | initial | inherit;The integer must be 1 or greater. Zero and negative values are invalid.
| Value | Description | Try it |
|---|---|---|
auto | Default. Column count comes from other properties such as column-width | Try it |
<integer> | Ideal number of columns (1 or more). With a set column-width, this is the maximum | Try it |
2 | Two columns | Try it |
3 | Three columns | Try it |
4 | Four columns | Try it |
initial | Resets to auto | Try it |
inherit | Takes the parent's column-count (the property does not inherit by default) | Try it |
column-countPick a block of flowing text, set how many columns you want, then tune spacing and rules if needed.
div, article, section, or p) that holds continuous content.column-count to a positive integer, or use auto with column-width.column-gap for space and column-rule for a divider.| Piece | Required? | Role |
|---|---|---|
column-count | Yes (for a fixed count) | How many columns to aim for |
column-width | Optional | Preferred width; with a count, the count is a max |
column-gap | Optional | Space between columns |
column-rule | Optional | Vertical line between columns |
Change the count and watch the same paragraph reflow across columns.
Each snippet keeps only what column-count needs. Use Try It Yourself for a live editor.
Split one paragraph into two equal columns.
<style>
p {
column-count: 2;
}
</style>
<p>
London. Michaelmas term lately over…
</p>column-count: 2 asks the browser for two columns.column-fill).Use a higher count for a denser, magazine-style layout.
<style>
p {
column-count: 3;
}
</style>
<p>
London. Michaelmas term lately over…
</p>column-count: 3 targets three columns.column-gap or column-rule when spacing or dividers help reading.auto with column-widthLet the browser choose how many columns fit a preferred width.
<style>
p {
column-count: auto;
column-width: 8rem;
}
</style>
<p>
London. Michaelmas term lately over…
</p>column-count: auto does not force a fixed number.column-width: 8rem is the size the browser aims for.If columns look wrong, check the count, width, and container size first.
auto alone stays one columnWith only column-count: auto and no useful column-width, you still get a single column. Pair auto with a width, or set an integer.
When both are non-auto, column-count is a ceiling. The browser may use fewer columns if the container is narrow.
On small screens, four columns can become unreadably narrow. Prefer fewer columns or auto + column-width for responsive text.
Multi-column flows continuous content. For separate cards, toolbars, or form layouts, use Grid or Flexbox instead.
A heading may land at the bottom of a column. Use break-inside: avoid on elements that should stay together.
column-count is a browser layout property. Node.js, Deno, and Bun do not apply it.
Chrome 50+, Firefox 52+, Safari 9+, Edge 12+, IE 10+. Older engines used -webkit- or -moz- prefixes.
Bottom line: Safe for production. Unprefixed support has been Baseline since March 2017. Very old browsers may need -webkit-column-count / -moz-column-count.
auto (often with column-width).column-gap and column-rule for spacing and dividers.columns can set count and width together.One line: column-count turns one block of text into a multi-column layout; use an integer for a fixed count or auto with column-width for flexible columns.
Control whether columns balance or fill sequentially.
8 people found this page helpful