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 ModuleThe 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
column-count
|
Chrome Full support 50 Full support 50 Full support 1 Prefixed' Implemented with the vendor prefix: -webkit- |
Edge Full support 12 Full support 12 Full support 12 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Full support 52 Full support 52 No support 1.5 — 74 Prefixed' Implemented with the vendor prefix: -moz-
Notes' Prior to version 37, multiple columns didn't work with |
IE
Full support 10 |
Opera Full support 11.1 Full support 11.1 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari Full support 9 Full support 9 Full support 3 Prefixed' Implemented with the vendor prefix: -webkit- |
WebView Android Full support 50 Full support 50 Full support ≤37 Prefixed' Implemented with the vendor prefix: -webkit- |
Chrome Android Full support 50 Full support 50 Full support 18 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Android Full support 52 Full support 52 Full support 4 Prefixed' Implemented with the vendor prefix: -moz-
Notes' Prior to version 37, multiple columns didn't work with |
Opera Android Full support 11.1 Full support 11.1 Full support 14 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari iOS Full support 9 Full support 9 Full support 1 Prefixed' Implemented with the vendor prefix: -webkit- |
Samsung Internet Android Full support 5.0 Full support 5.0 Full support 1.0 Prefixed' Implemented with the vendor prefix: -webkit- |
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
- [[../../../Learn/CSS/CSS_layout/Multiple-column_Layout|Multiple-column Layout]] (Learn Layout)
- Basic Concepts of Multicol
column-count by Mozilla Contributors is licensed under CC-BY-SA 2.5.