column-count
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
The column-count
CSS property breaks an element's content into the specified number of columns.
Try it
Syntax
css
/* Keyword value */
column-count: auto;
/* <integer> value */
column-count: 3;
/* Global values */
column-count: inherit;
column-count: initial;
column-count: revert;
column-count: revert-layer;
column-count: unset;
Values
auto
-
The number of columns is determined by other CSS properties, such as
column-width
. <integer>
-
Is a strictly positive
<integer>
describing the ideal number of columns into which the content of the element will be flowed. If thecolumn-width
is also set to a non-auto
value, it merely indicates the maximum allowed number of columns.
Formal definition
Initial value | auto |
---|---|
Applies to | Block containers except table wrapper boxes |
Inherited | no |
Computed value | as specified |
Animation type | an integer |
Formal syntax
column-count =
auto |
<integer [1,∞]>
Examples
Splitting a paragraph across three columns
HTML
html
<p class="content-box">
This is a bunch of text split into three columns using the CSS
<code>column-count</code>
property. The text is equally distributed over the columns.
</p>
CSS
css
.content-box {
column-count: 3;
}
Result
Specifications
Specification |
---|
CSS Multi-column Layout Module Level 1 # cc |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
column-count | ||||||||||||
auto |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
column-width
,columns
shorthandcolumn-rule-color
,column-rule-style
,column-rule-width
,column-rule
shorthand- Learn: Multiple-column Layout (Learn Layout)
- Basic Concepts of Multicol