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-widthandcolumn-countproperties. Thecolumn-widthvalue is a<length>value, and thecolumn-countvalue is an<integer>value. An omitted value is set to its initial value.See the
column-widthandcolumn-countentries 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.
Browser Support
CSS3 Multiple column layout
Method of flowing information in multiple columns
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 50
- 92
- 10
- 37
- 10
Mobile / Tablet
- 10
- 131
- all
- 131
- 132
