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 valueauto
Applies toBlock containers except table wrapper boxes
Inheritedno
Mediavisual
Computed valueas specified
Animation typean integer
Canonical orderper 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

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

50

Yes -webkit-

Yes

Yes -webkit-

52

1.5 -moz-

10

11.10

15 -webkit-

3 -webkit-
On display: table-caption Yes Yes37 Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support Yes50

Yes

Yes -webkit-

52

1 -moz-

Yes

Yes

Yes -webkit-

Yes

Yes -webkit-

On display: table-caption Yes ? Yes37 Yes Yes Yes