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
The compatibility table in 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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
column-count | Chrome
Full support
50
| Edge
Full support
12
| Firefox
Full support
52
| IE Full support 10 | Opera
Full support
11.1
| Safari
Full support
9
| WebView Android
Full support
50
| Chrome Android
Full support
50
| Firefox Android
Full support
52
| Opera Android
Full support
11.1
| Safari iOS
Full support
9
| Samsung Internet Android
Full support
5.0
|
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
- Multiple-column Layout (Learn Layout)
- Basic Concepts of Multicol