CSS columns attribute

Definition and usage

The columns property is a shorthand property used to set column width and number.

See also:

CSS3 Tutorial:CSS3 Multicol

HTML DOM Reference Manual:columns property

Example

Specifies the width and number of columns:

div
{
columns:100px 3;
}

Try it yourself

More examples are at the bottom of the page.

CSS syntax

columns: column-width column-count;

Attribute value

Value Description
column-width Column width.
column-count Number of columns.

Technical details

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

More examples

Column-count
Divides the text within the div element into three columns.
Column-gap
Divides the text within the div element into three columns, with a space of 30 pixels between them.
Column-rule
Specifies the width, style, and color between columns.

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Numbers with -webkit- or -moz- prefixes indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
50.0
4.0 -webkit-		 10.0 52.0
9.0 -moz-		 9.0
3.1 -webkit-		 37.0
15.0 -webkit-
11.1