CSS columns Property

CSS columns property sets the minimum width and the maximum number of columns in a multi-column layout. It is a shorthand of below two properties:

The column-width property sets the minimum width of each column and the column-count property sets the maximum possible numbers of columns in the layout.

As the multi-column layout is responsive in nature. Therefore, if enough space is not available, the number of columns starts decreasing and column width starts increasing.

If the available space is less than the specified column width, there will be only one column that will be restricted to fit in the available space.

In the example below, each column will be at least 100px wide and there will be maximum 3 columns in the layout. Try it out to see how it works:

Example:

div{
  columns: 100px 3;
}

Note: If any of the two values is omitted, its default(initial) value will be used.


CSS Syntax

The columns property has the following syntax:

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

Property Values

The columns property accepts the following values:

autoThis is the default value. It Sets both properties to their initial value(auto).
column-widthSpecifies the minimum width of each column.
column-countSpecifies the maximum number of columns that a layout can have.
initialSets the columns property to its default value(auto).
inheritInherits the columns property from the parent element.

General Info

Default Valueauto auto
InheritedNo
JavaScript Usageelement.style.columns = “100px 3”