CSS | column-count Property

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

Syntax:

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

Property Values:

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

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- 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 Amazom, Microsoft, Adobe etc.
        </div>
    </body>
</html>                    

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- 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 Amazom, Microsoft, Adobe, etc.
        </div>
    </body>
</html>                    

chevron_right


Output:

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

  • Google Chrome 50.0, 4.0 -webkit-
  • Internet Explorer 10.0
  • Firefox 52.0, 2.0 -moz-
  • Safari 9.0, 3.1 -webkit-
  • Opera 37.0, 15.0 -webkit-, 11.1


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.