The columns
CSS property is a shorthand property allowing to set both the column-width
and the column-count
properties at the same time.
/* Column width */ columns: 1em; /* Column count */ columns: auto; columns: 1; /* Combination of column width and count */ columns: 1 auto; columns: auto 12em; columns: auto auto; /* Global values */ columns: inherit; columns: initial; columns: unset;
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | Block containers except table wrapper boxes |
Inherited | no |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand: |
Canonical order | per grammar |
Syntax
Values
<'column-width'>
- Is a
<length>
value giving a hint of the optimal width of the column. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). The length must be strictly positive or the declaration is invalid. <'column-count'>
- Is a strictly positive
<integer>
describing the ideal number of columns into which the content of the element will be flowed. If thecolumn-width
is also set to a non-auto value, it merely indicates the maximum allowed number of columns.
Formal syntax
<'column-width'> || <'column-count'>
Example
HTML
<p class="content-box"> This is some text split into three columns using the CSS property columns. The text is equally distributed over the columns. </p>
CSS
.content-box { margin: 0; height: 90px; border: 3px solid black; columns: 3; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module The definition of 'columns' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | (Yes) -webkit 50.0[1] |
(Yes)-webkit (Yes) |
9 (9) -moz 52 (52)[2] |
10 | 11.10 15 -webkit |
3.0 (522)-webkit |
on display: table-caption |
(Yes) | (Yes) | 37 (37) | (Yes) | (Yes) | (Yes) |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | 2.1 -webkit | 50.0 | (Yes)-webkit (Yes) |
22.0 (22) -moz 52.0 (52)[2] |
10 | 11.5 32 -webkit |
3.2 -webkit | 50.0 |
on display: table-caption |
(Yes) | ? | (Yes) | 37.0 (37) | (Yes) | (Yes) | (Yes) | ? |
[1] Unprefixed as of Chrome 50.
[2] Unprefixed as of Gecko 52, with prefixed aliases still available.
Document Tags and Contributors
Tags:
Contributors to this page:
stevenmg,
Sebastianz,
captainbarbosa,
arronei,
chrisdavidmills,
erikadoyle,
SphinxKnight,
brunopulis,
jpmedley,
Prinz_Rana,
fscholz,
jsx,
teoli,
estelle,
kscarfone,
Sheppy,
ethertank,
brianloveswords
Last updated by:
stevenmg,