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;
}

Comments

Most Reads