CSS - column-count

The column-count CSS property describes the number of columns of the element.

Example

CSS

Copy Code

.content-box {
  border: 10px solid #000000;
  column-count: 3;
}

CSS

Copy Code

column-count: 3;
column-count: auto;

column-count: inherit;
column-count: initial;
column-count: unset;

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.

CSS

Copy Code

<a title="" href="css/number"><number></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> auto

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

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

Specification	Status	Comment
CSS Multi-column Layout Module The definition of 'column-count' in that specification.	Candidate Recommendation	Initial definition

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/column-count