CSS3 column-count Property

Example

Divide the text in the div element into three columns:

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

Try it yourself »
More examples at the bottom of this page.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The column-count property is not supported in any of the major browsers.

Firefox supports an alternative, the -moz-column-count property.

Safari and Chrome support an alternative, the -webkit-column-count property.


Definition and Usage

The column-count property specifies the number of columns an element should be divided into.

Default value: auto
Inherited: no
Version: CSS3
JavaScript syntax: object.style.columnCount=3


Syntax

column-count: number|auto;

Value Description
number The optimal number of columns into which the content of the element will be flowed
auto The number of columns will be determined by other properties, like e.g. "column-width"


Examples

Try it Yourself - Examples

Column-gap
Divide the text in a div element into three columns, and specify a 30 pixels gap between the columns.

Column-rule
Specify the width, style and color of the rule between columns.