columns
The columns
CSS shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* Column width */
columns: 18em;
/* Column count */
columns: auto;
columns: 2;
/* Both column width and count */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;
/* Global values */
columns: inherit;
columns: initial;
columns: revert;
columns: unset;
The columns
property may be specified as one or two of the values listed below, in any order.
Values
<'column-width'>
-
The ideal column width, defined as a
<length>
or the keywordauto
. The actual width may be wider or narrower to fit the available space. Seecolumn-width
. <'column-count'>
-
The ideal number of columns into which the element's content should be flowed, defined as an
<integer>
or the keywordauto
. If neither this value nor the column's width areauto
, it merely indicates the maximum allowable number of columns. Seecolumn-count
.
Formal definition
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | Block containers except table wrapper boxes |
Inherited | no |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand: |
Formal syntax
Examples
Setting three equal columns
HTML
<p class="content-box">
This is a bunch of text split into three columns
using the CSS `columns` property. The text
is equally distributed over the columns.
</p>
CSS
.content-box {
columns: 3 auto;
}
Result
Specifications
Specification |
---|
CSS Multi-column Layout Module Level 2 # columns |
Browser compatibility
BCD tables only load in the browser