column-count

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

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

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

Syntax

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

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

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

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

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.

Document Tags and Contributors

Last updated by: llkk, May 14, 2017, 11:15:39 AM