This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

column-count

Summary

Specifies the number of columns an element should be divided into.

Overview table

Initial value
auto
Applies to
non-replaced block-level elements (except table elements), table cells, and inline-block elements
Inherited
No
Media
visual
Computed value
as specified
Animatable
Yes
CSS Object Model Property
columnCount
Percentages
N/A

Syntax

  • column-count: auto
  • column-count: count

Values

count
An integer value that specifies the number of columns in the multi-column element. Values must be greater than 0. When column-width is specified with ****column-count**** and both have non-auto values, the integer value defines the maximum number of columns.
auto
The number of columns is determined by the values of other property values of the multi-column element, such as column-width.

Examples

This example shows how to render text within the section.newspaper element in three columns.

#columns {
  -moz-column-count: 3; /* Firefox */
  -webkit-column-count: 3; /* Safari and Chrome */
  column-count: 3;
}

View live example

Using auto for column-count will allow as many columns as are necessary or able to be generated.

/* auto column-count allows n-columns of column-width */
div {
column-count: auto;
column-width: 100px;
}

Notes

Remarks

The actual column count may vary from the value specified due to available space. To ensure the specified value is used, all length property values of the multi-column element must be specified.

Syntax

column-count: count | auto

Related specifications

CSS Multi-column Layout Module
W3C Candidate Recommendation

See also

Related articles

Multi-Column

Responsive Web Design

Related pages

Attributions

  • Microsoft Developer Network: Article