CSS column-count Property

The column-count property is used to divide the content of an HTML element into multiple columns, creating a newspaper-style layout.

Specifies the number of columns into which content should be divided.
Default value is auto.
Helps improve content readability and presentation.
Commonly used for articles, blogs, and long text sections.
Works as part of CSS Multi-column Layout.

Syntax:

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

Property Values:

number: This value is used to indicate the number of columns.
auto: It is the default value. The number of columns is determined by other properties.
initial: This value is used to set the property to the default value.
inherit: It inherits the property from its parent.

Example 1: Shows the use of the column-count property.

html

<!--Driver Code Starts-->
<!-- HTML program to illustrate the 
    column-count property -->
<!DOCTYPE html>
<html>
  
<head>
    <title>column count property</title>
<!--Driver Code Ends-->

    <style>
        .gfg {
            -webkit-column-count: 2;
            -moz-column-count: 2;
            column-count: 2;
            /* divides text in 2 columns */
        }

        h1 {
            color: green;
        }

        h1,
        h2 {
            text-align: center;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <h1>
        GeeksforGeeks
    </h1>

    <h2>
        Example of column-count Property
    </h2>

    <!-- Text inside below div will be 
                divided into 2 columns -->
    <div class="gfg">
        The course is designed for students as
        well as working professionals to prepare
        for coding interviews. This course is going
        to have coding questions from school level
        to the level needed for product based
        companies like Amazon, Microsoft, Adobe etc.
    </div>
</body>
  
</html>
<!--Driver Code Ends-->

Example 2:

html

<!--Driver Code Starts-->
<!-- HTML program for column-count property of CSS -->
<!DOCTYPE html>
<html>
  
<head>
    <title>column count property</title>
<!--Driver Code Ends-->

    <style>
        .gfg {
            -webkit-column-count: 2;
            -moz-column-count: 2;
            column-count: 2;
            -webkit-column-rule: 10px double green;
            -moz-column-rule: 10px double green;
            column-rule: 10px double green;
            text-align: justify;
        }

        h1 {
            color: green;
        }

        h1,
        h2 {
            text-align: center;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <h1>
        GeeksforGeeks
    </h1>

    <h2>
        Example column-count Property
    </h2>

    <!-- The text inside below div will be divided into 
            2 columns -->
    <div class="gfg">
        The course is designed for students as well
        as working professionals to prepare for
        coding interviews. This course is going to
        have coding questions from school level to
        the level needed for product based companies
        like Amazon, Microsoft, Adobe, etc.
    </div>
</body>
  
</html>
<!--Driver Code Ends-->

CSS column-count Property

Explore