CSS3 columns Property

Example

Specify the width and number of columns:

div
{
-webkit-columns:100px 3; /* Safari and Chrome */
columns:100px 3;
}

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

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The columns property is not supported in any of the major browsers.

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


Definition and Usage

The columns property is a shorthand property for setting column-width and column-count.

Default value: auto auto
Inherited: no
Version: CSS3
JavaScript syntax: object.style.columns="100px 3"


Syntax

columns: column-width column-count;

Value Description
column-width The width of the columns
column-count The number of columns


Examples

Try it Yourself - Examples

Column-count
Divide the text in a div element into three columns.

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.