Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Our volunteers haven't translated this article into عربي yet. Join us and help get the job done!

Summary

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

Initial valueauto
Applies tonon-replaced block elements (except table elements), table-cell or inline-block elements
Inheritedno
Mediavisual
Computed valueas specified
Animatableyes, as an integer
Canonical orderthe 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.

Formal syntax

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

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

 Last updated by: Sebastianz,