Open In App

CSS column-count Property

Improve
Improve
Like Article
Like
Save
Share
Report

The column-count property in CSS is used to divide a portion of content inside any HTML element into a given number of columns.

Default Value: auto

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: This example shows the use of the column-count property.

html




<!-- HTML program to illustrate the
    column-count property -->
<!DOCTYPE html>
<html>
   
<head>
    <title>column count property</title>
    <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>
</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>


Output:  

Example 2:  

html




<!-- HTML program for column-count property of CSS -->
<!DOCTYPE html>
<html>
   
<head>
    <title>column count property</title>
    <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>
</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>


Output:  

Supported Browser: The browser supported by column-count property are listed below:  

  • Google Chrome 50.0 and above
  • Edge 12.0 and above
  • Firefox 52.0 and above
  • Safari 9.0 and above
  • Opera 11.1 and above


Last Updated : 02 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads