column-count
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 `column-count`
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
BCD tables only load in the browser
See also
column-width
,columns
shorthandcolumn-rule-color
,column-rule-style
,column-rule-width
,column-rule
shorthand- Multiple-column Layout (Learn Layout)
- Basic Concepts of Multicol