Expand All | Collapse All

CSS3 column-count Property

Topic: CSS3 Properties ReferencePrev|Next


The column-count CSS property specifies the number of columns in a multi-column element.

The following table summarizes the usages context and the version history of this property.

Default value: auto
Applies to: Non-replaced block-level elements (except table elements), table cells, and inline-block elements
Inherited: No
Animatable: Yes. See animatable properties.
Version: New in CSS3


The syntax of the property is given with:

column-count number | auto | initial | inherit

The example below shows the column-count property in action.

p {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
       -moz-column-count: 3; /* Firefox */
            column-count: 3; /* Standard syntax */

Property Values

The following table describes the values of this property.

Value Description
number A positive integer value that specifies the number of columns in the multi-column element. If the column-width is also set to a non auto value, it may indicates the maximum allowed number of columns.
auto The number of columns is determined by other CSS properties, like column-width. This is default value.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element column-count property.

Browser Compatibility

The column-count property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 2+ -moz-
  • Google Chrome 4+ -webkit-
  • Internet Explorer 10+
  • Apple Safari 3.1+ -webkit-
  • Opera 11.1+ -o-, 15+ -webkit-

Further Reading

See tutorial on: CSS3 Multi-column Layouts.

Related properties: column-width, column-gap, column-rule, column-rule-width, column-rule-style, column-rule-color, column-span, column-fill, columns.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties