Summary
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 Animatable yes, as 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 the column-width
is also set to a non-auto value, it merely indicates the maximum allowed number of columns.
<number> | auto
Examples
.content-box {
border: 10px solid #000000;
column-count: 3;
}
Specifications
Browser compatibility
Feature
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari (WebKit)
Basic support
(Yes) -webkit
1.5 (1.8)-moz
10
11.10
3.0 (522)-webkit
on display:
table-caption
(Yes)
37 (37)
(Yes)
(Yes)
(Yes)
Unprefixed
50.0
Feature
Android
Android Webview
Firefox Mobile (Gecko)
IE Phone
Opera Mobile
Safari Mobile
Chrome for Android
Basic support
(Yes)
?
1.0 (1.8)-moz
(Yes)
(Yes)
(Yes)
?
on display:
table-caption
(Yes)
?
37.0 (37)
(Yes)
(Yes)
(Yes)
?
Unprefixed
No support
50.0
50.0
Document Tags and Contributors
Contributors to this page:
jpmedley ,
fscholz ,
tim_kraut ,
Sebastianz ,
jsx ,
teoli ,
kscarfone ,
Sheppy ,
ethertank ,
brianloveswords ,
kuvik3 ,
Marsf ,
SPQRobin ,
Jürgen Jeka ,
DBaron ,
Waldo ,
BijuGC
Last updated by:
jpmedley ,
Apr 27, 2016, 7:22:25 PM