The column-count
property allows you to specify the number of columns in which the content of an element is displayed. It is a longhand property for columns
.
CSS
column-count: value;
This property can be used when you want a multi-column layout, similar to that used in print magazines.
If you specify the number of columns, then the content gets evenly distributed in exactly that number of columns. However, if you also specify the column widths using the column-width
property, then the number of columns specified by the column-count
property determines the maximum number of columns.
Values
auto
: Specifies that the number of columns will be decided by other properties like column-width
. This is the default value.
<integer>
: Specifies the number of columns in which the content will flow. If the column-width
property is set to a value which is not auto
, then it specifies the maximum number of allowed columns.
initial
: Sets the default value of the property.
inherit
: Inherits the value from parent element.
Example
In the following demo, the number of columns into which the content of the paragraph is to be divided is set to 3 using the column-count
property. Use the prefix -webkit- for browser support from Chrome, Safari and Opera, and -moz- for support from Firefox.
HTML
<p>Lorem ipsum ... ultricies sapien.</p>
CSS
body {
background-color: burlywood;
}
p {
margin: 20px;
padding: 10px;
text-align: justify;
background-color: white;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
See the Pen column-count example by Aakhya Singh (@aakhya) on CodePen.
Browser Support
This property is not supported in IE 9 and earlier versions. For maximum browser compatibility, use the prefixes -webkit- and -moz-.