CSS - column-count Property

Quiz

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