Skip to content
Related Articles

Related Articles

Improve Article

CSS | column-count Property

  • Last Updated : 29 Apr, 2021

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: 
 

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, 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

 

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :