CSS Reference Property

columns

The columns property allows you to lay an element’s content in multiple columns.

It is a shorthand property for setting the longhand properties: column-width and column-count.

Using columns, you can specify the number and width of columns that you want the element’s content to be laid into. You can specify values for both the column-width and column-count properties, or for only one of them. If you leave one of them out, it is set to its initial (default) value.

Setting both column-count and column-width may not always make sense, as it may restrict the flexibility and responsiveness of the layout, such as if you use absolute widths for the columns instead of percentage widths.

Laying content, like text and images, in multiple columns is usually done in print magazine layouts, and using this property, along with others, you can create a similar effect on the web.

Trivia & Notes

If the width and count of columns do not fit into the width of the element, the browser will make necessary adjustments and may reduce the column count to fit the specified column widths into the element. If the column count is reduced to 1, and the column width is still wider than the element’s width, the width is also narrowed down to fit the element. If the width of the columns is small so that the entire specified number can fit and more space remains available, the browser will stretch the columns’ width in the available space.

Official Syntax

  • Syntax:

    columns: <'column-width'> ||  <'column-count'>
  • Initial: auto auto; which is the concatenation of the initial values of the two longhand properties.
  • Applies To: non-replaced block-level elements (except table elements), table cells, and inline-block elements
  • Animatable: both of the longhand properties is animatable.

Values

<‘column-width’> || <‘column-count’>
Values for the column-width and column-count properties. The column-width value is a <length> value, and the column-count value is an <integer> value. An omitted value is set to its initial value.

See the column-width and column-count entries for more information about the possible values for each.

Examples

The following example lays the contents of the .mag element in two columns, each having a width of ’12em’.

.mag {
  columns: 12em 2;
}

            

The following are all possible columns values:

columns: 3; /* 3 columns, their widths are "auto" which means that the browser will determine the widths based on the available space */
columns: 300px 3; /* 3 columns, each 300px wide */
columns: 25%; /* columns each 25% of the container width. Column count is determined by the browser based on the available space */
            

Live Demo

Play with the values of the columns property in the following demo to see how the layout changes. Try using different column counts and widths that are wider than the element itself to see how the browser handles these scenarios.

View this demo on the Codrops Playground

Browser Support

CSS3 Multiple column layout Support

Method of flowing information in multiple columns

Current Status: W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 4*
  • 2*
  • 10
  • 11.
  • 3.1*

Mobile / Tablet

  • 3.2*
  • 2.1*
  • 11.
  • 56
  • 51*

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:26 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.