column-count
column-count
The column-count
CSS property describes the number of columns of the element.
Initial value | auto |
---|---|
Applies to | non-replaced block elements (except table elements), table-cell or inline-block elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | an integer |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
column-count: 3; column-count: auto; column-count: inherit; column-count: initial; column-count: unset;
Values
auto
- Is a keyword indicating that the number of columns should be determined by other CSS properties, like
column-width
. <number>
- 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 syntax
<number> | auto
Examples
.content-box { border: 10px solid #000000; column-count: 3; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module The definition of 'column-count' in that specification. | Candidate Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support |
(Yes)-webkit 50.0[1] |
(Yes)-webkit (Yes) |
1.5 (1.8)-moz 52 (52)[2] | 10 | 11.10 | 3.0 (522)-webkit |
on display: table-caption
| (Yes) | (Yes) | 37 (37) | (Yes) | (Yes) | (Yes) |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | (Yes) |
(Yes) 50.0[1] |
(Yes)-webkit (Yes) | 1.0 (1.8)-moz 52.0 (52)[2] | (Yes) | (Yes) | (Yes) |
? 50.0[1] |
on display: table-caption
| (Yes) | ? | (Yes) | 37.0 (37) | (Yes) | (Yes) | (Yes) | ? |
[1] Unprefixed as of Chrome 50.
[2] Unprefixed as of Gecko 52, with prefixed aliases still available.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-count