BlogsDope image BlogsDope

CSS column-count

Feb. 7, 2018 CSS HTML 320

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-.

Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).