CSS columns Property

Example

Specify the minimum width for each column, and the maximum number of columns:

div {
  columns: 100px 3;
}

Definition and Usage

The columns property is a shorthand property for:

• column-width
• column-count

The column-width part will define the minimum width for each column, while the column-count part will define the maximum number of columns. By using this property, the multi-column layout will automatically break down into a single column at narrow browser widths, without the need of media queries or other rules.

Default value:	auto auto
Inherited:	no
Animatable:	yes, see individual properties.
Version:	CSS3
JavaScript syntax:	object.style.columns="100px 3"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which columns is applied.
• Animatable - "Animatable = yes" means that it can be animated with CSS @keyframes.

Browser Support

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

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
columns	50.0 4.0 -webkit-	10.0	52.0 9.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1

CSS Syntax

columns: auto|column-width column-count|initial|inherit;

Property Values

Value	Description	Demo
auto	Default value. Sets both the column-width and column-count to "auto"
column-width	Defines the minimum width for each column
column-count	Defines the maximum number of columns
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

Divide the text in a <div> element into three columns:

div {
  column-count: 3;
}

Example

Specify a 40 pixels gap between the columns:

div {
  column-gap: 40px;
}

Example

Specify the width, style, and color of the rule between columns:

div {
  column-rule: 4px double #00ffff;
}