column-count
The column-count CSS property breaks an element's content into the specified number of columns.
Syntax
/* Keyword value */
column-count: auto;
/* <integer> value */
column-count: 3;
/* Global values */
column-count: inherit;
column-count: initial;
column-count: unset;
Values
auto- The number of columns is determined by other CSS properties, such as
column-width. <integer>- Is a strictly positive
<integer> describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.
<integer> | auto
Example
HTML
<p class="content-box">
This is a bunch of text split into three columns
using the CSS `column-count` property. The text
is equally distributed over the columns.
</p>
CSS
.content-box {
column-count: 3;
}
Result
Specifications
|
Desktop |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
| Basic support |
50
- 50
- Yes
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
12
- 12
- 12
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
52
- 52
- 1.5
Prefixed
- Prefixed Requires the vendor prefix: -moz-
|
10 |
11.1
- 11.1
- 15
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
3 Prefixed
- 3
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
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
- Yes
- Yes
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
52
- 52
- 4
Prefixed
- Prefixed Requires the vendor prefix: -moz-
|
Yes
- Yes
- Yes
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
Yes
- Yes
- Yes
Prefixed
- Prefixed Requires the vendor prefix: -webkit-
|
5.0 |
On display: table-caption
|
Yes |
? |
Yes |
37 |
Yes |
Yes |
? |
See Also