The column-count
CSS property breaks an element's content into the specified number of columns.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
/* Keyword value */
column-count: auto;
/* <integer> value */
column-count: 3;
/* Global values */
column-count: inherit;
column-count: initial;
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
<integer> | auto
Examples
Splitting a paragraph across three columns
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
.content-box {
column-count: 3;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module The definition of 'column-count' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
BCD tables only load in the browser
See also
- Multiple-column Layout (Learn Layout)
- Basic Concepts of Multicol