column-count

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

/* <integer> value */
column-count: 3;

/* Keyword value */
column-count: auto;

/* Global values */
column-count: inherit;
column-count: initial;
column-count: unset;

Initial value	`auto`
Applies to	Block containers except table wrapper boxes
Inherited	no
Media	visual
Computed value	as specified
Animation type	an integer
Canonical order	per grammar

Syntax

Values

auto: Is a keyword indicating that the number of columns should be determined by other CSS properties, like 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 the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.

Formal syntax

<integer> | 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

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: mfluehr, Sep 13, 2017, 2:23:31 PM