The columns
CSS property sets the column width and column count of an element.
It is a shorthand property that sets both the column-width
and column-count
properties in a single, convenient declaration. As with all shorthand properties, any omitted sub-values will be set to their initial value.
/* 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: unset;
The columns
property may be specified as one or two of the values listed below, in any order.
<'column-width'>
<length>
or the keyword auto
. The actual width may be wider or narrower to fit the available space. See column-width
.<'column-count'>
<integer>
or the keyword auto
. If neither this value nor the column's width are auto
, it merely indicates the maximum allowable number of columns. See column-count
.<'column-width'> || <'column-count'>
<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>
.content-box { columns: 3 auto; }
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module The definition of 'columns' in that specification. | Working Draft | Initial definition. |
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 50
|
12
|
52
|
10 | 11.1
|
3
|
On display: table-caption
|
Yes | Yes | 37 | Yes | Yes | Yes |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes
|
50 | Yes
|
52
|
11.5
|
3.2
|
5.0 |
On display: table-caption
|
Yes | ? | Yes | 37 | Yes | Yes | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/columns