In this section, we will learn what column-count property is and how to use it in CSS.

CSS column-count Property Definition and Usage

The CSS `column-count` property is used to divide the content of an element into multiple columns!

Basically, using this property, we can create column based content just like the layout you see in newspapers.

CSS column-count Property Syntax

column-count: number|auto|initial|inherit;

CSS column-count Property Value

The value we set for this property is a number, which is the number of columns we want the content of the target element to be divided into.

For example, if you set the value of this property to 4, it means the content of that element should be divided into 4 columns.

Example: column-count property in CSS

See the Pen column-count property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS column-count Property Work?

In this example, the value of the `column-count` property is set to 3, and that means the <div> element’s content should be divided into 3 columns.