CSS - column-count Property

CSS column-count property is responsible for breaking the content of an element into the specified number of columns.

Syntax

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

Property Values

Value	Description
auto	The number of columns into which an element has to be divided is decided by other CSS properties such as column width. Default.
number	It specifies the number of columns into which the content of element will be divided.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Column Count Property

The following examples explain the column-count property with different values.

Column Count Property with Auto Value

To let the number of columns adjust automatically based on the content and container size, so that the layout looks balanced and fits the available space, we use the auto value. This is shown in the following example.

Example

 <!DOCTYPE html> <html> <head> <style> .col-count-width { column-count: auto; column-width: 250px; } </style> </head> <body> <h2> CSS column-count property </h2> <p> <strong> column-count: auto value </strong> </p> <div> <p class="col-count-width"> TutorialsPoint is a comprehensive online learning platform offering a wide range of tutorials and resources across various subjects such as programming, web development, and technology. It provides high-quality, accessible educational materials designed for learners of all levels, featuring tutorials, coding exercises,and practical examples to facilitate self-paced learning and skill development. </p> </div> </body> </html>

Column Count Property with Numeric Value

To let the content be displayed in different number of columns as per our choice, we specify the number of columns we want (e.g. 3,4,5 etc.). Based on the number specified the content will be displayed as that many columns. This is shown in the following example.

Example

 <!DOCTYPE html> <html> <head> <style> .multicol-col-count { column-count: 4; } </style> </head> <body> <h2> CSS column-count property </h2> <p> <strong> column-count: 4 (content displayed in 4 columns) </strong> </p> <div> <p class="multicol-col-count"> TutorialsPoint is a comprehensive online learning platform offering a wide range of tutorials and resources across various subjects such as programming, web development, and technology. It provides high-quality,accessible educational materials designed for learners of all levels, featuring tutorials, coding exercises, and practical examples to facilitate self-paced learning and skill development. </p> </div> </body> </html>

Supported Browsers

Property
column-count	50.0	10.0	52.0	9.0	37.0

css_reference.htm

Print Page