CSS | columns Property

In CSS the columns property is used to set the number of columns and the width of the columns. This is a shorthand property and can take multiple values at a time.

Syntax:

columns: column-width columns-count | auto | initial | inherit;

Values of this property:

  • auto: This sets the column-width and column-count values to their browser default values.

    Syntax:

    columns: auto auto;
    

    Example 1: Using auto as the value.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            body {
                text-align: center;
                color: green;
            }
              
            .GFG {
                -webkit-columns: auto auto;
                /* Chrome, Safari, Opera */
                -moz-columns: auto auto;
                /* Firefox */
                columns: auto auto;
            }
        </style>
    </head>
      
    <body>
      
        <h1>The column Property</h1>
      
        <div class="GFG">
            <h2>Welcome to the world of Geeks!!</h2> How many times were you frustrated while looking out for a good collection of programming/algorithm/interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well explained solutions for selected questions. Team
      
            <p><strong>Our team includes: </strong>
                <p>Sandeep Jain: An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to solve programming problems in most efficient ways. Apart from GeeksforGeeks, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor.
                </p>
      
                <p>Vaibhav Bajpai: Amazed by computer science, he is a technology enthusiast who enjoys to be a part of a development. Off from work, you can find him in love with movies, food and friends.
                </p>
      
                <p>Shikhar Goel: A Computer Science graduate who likes to make things simpler. When he's not working, you can find him surfing the web, learning facts, tricks and life hacks. He also enjoys movies in his leisure time.
                </p>
      
                <p>Dharmesh Singh: A software developer who is always trying to push boundaries in search of great breakthroughs. Off from his desk, you can find him cheering up his buddies and enjoying life.
                </p>
      
                <p>Shubham Baranwal: A passionate developer who always tries to learn new technology and software. In his free time, either he reads some articles or learns some other stuff.
                </p>
            </p>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    Note: If any of the values among the column-width and column-count are not specified, then the browser assumes their value as auto by default.

  • integer: This is used to specify the column-width and the column-count using integer values.

    Syntax:

    columns: column-width column-count;
    

    Example 2:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            body {
                text-align: center;
                color: green;
            }
              
            .GFG {
                -webkit-columns: 60px 5;
                /* Chrome, Safari, Opera */
                -moz-columns: 60px 5;
                /* Firefox */
                columns: 60px 5;
            }
        </style>
    </head>
      
    <body>
      
        <h1>The column Property</h1>
      
        <div class="GFG">
            <h2>Welcome to the world of Geeks!!</h2> How many times were you frustrated while looking out for a good collection of programming/algorithm/interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well explained solutions for selected questions. Team
      
            <p><strong>Our team includes: </strong>
                <p>Sandeep Jain: An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to solve programming problems in most efficient ways. Apart from GeeksforGeeks, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor.
                </p>
      
                <p>Vaibhav Bajpai: Amazed by computer science, he is a technology enthusiast who enjoys to be a part of a development. Off from work, you can find him in love with movies, food and friends.
                </p>
      
                <p>Shikhar Goel: A Computer Science graduate who likes to make things simpler. When he's not working, you can find him surfing the web, learning facts, tricks and life hacks. He also enjoys movies in his leisure time.
                </p>
      
                <p>Dharmesh Singh: A software developer who is always trying to push boundaries in search of great breakthroughs. Off from his desk, you can find him cheering up his buddies and enjoying life.
                </p>
      
                <p>Shubham Baranwal: A passionate developer who always tries to learn new technology and software. In his free time, either he reads some articles or learns some other stuff.
                </p>
            </p>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • initial: Initializes the values to their initial default values.

    Syntax:

    columns: initial initial;
    

    Example 3:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            body {
                text-align: center;
                color: green;
            }
              
            .GFG {
                -webkit-columns: initial initial;
                /* Chrome, Safari, Opera */
                -moz-columns: initial initial;
                /* Firefox */
                columns: initial initial;
            }
        </style>
    </head>
      
    <body>
      
        <h1>The column Property</h1>
      
        <div class="GFG">
            <h2>Welcome to the world of Geeks!!</h2> How many times were you frustrated while looking out for a good collection of programming/algorithm/interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well explained solutions for selected questions. Team
      
            <p><strong>Our team includes: </strong>
                <p>Sandeep Jain: An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to solve programming problems in most efficient ways. Apart from GeeksforGeeks, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor.
                </p>
      
                <p>Vaibhav Bajpai: Amazed by computer science, he is a technology enthusiast who enjoys to be a part of a development. Off from work, you can find him in love with movies, food and friends.
                </p>
      
                <p>Shikhar Goel: A Computer Science graduate who likes to make things simpler. When he's not working, you can find him surfing the web, learning facts, tricks and life hacks. He also enjoys movies in his leisure time.
                </p>
      
                <p>Dharmesh Singh: A software developer who is always trying to push boundaries in search of great breakthroughs. Off from his desk, you can find him cheering up his buddies and enjoying life.
                </p>
      
                <p>Shubham Baranwal: A passionate developer who always tries to learn new technology and software. In his free time, either he reads some articles or learns some other stuff.
                </p>
            </p>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • inherit: Inherits the value from its parent element.

    Syntax:

    columns: inherit inherit;
    

    Example 4:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            body {
                text-align: center;
                color: green;
            }
              
            .GFG {
                -webkit-columns: inherit inherit;
                /* Chrome, Safari, Opera */
                -moz-columns: inherit inherit;
                /* Firefox */
                columns: inherit inherit;
            }
        </style>
    </head>
      
    <body>
      
        <h1>The column Property</h1>
      
        <div class="GFG">
            <h2>Welcome to the world of Geeks!!</h2> How many times were you frustrated while looking out for a good collection of programming/algorithm/interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well explained solutions for selected questions. Team
      
            <p><strong>Our team includes: </strong>
                <p>Sandeep Jain: An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to solve programming problems in most efficient ways. Apart from GeeksforGeeks, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor.
                </p>
      
                <p>Vaibhav Bajpai: Amazed by computer science, he is a technology enthusiast who enjoys to be a part of a development. Off from work, you can find him in love with movies, food and friends.
                </p>
      
                <p>Shikhar Goel: A Computer Science graduate who likes to make things simpler. When he's not working, you can find him surfing the web, learning facts, tricks and life hacks. He also enjoys movies in his leisure time.
                </p>
      
                <p>Dharmesh Singh: A software developer who is always trying to push boundaries in search of great breakthroughs. Off from his desk, you can find him cheering up his buddies and enjoying life.
                </p>
      
                <p>Shubham Baranwal: A passionate developer who always tries to learn new technology and software. In his free time, either he reads some articles or learns some other stuff.
                </p>
            </p>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

Browser Support:

  • Chrome 50.0, 4.0 -webkit-
  • Edge 10.0
  • Firefox 52.0, 9.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 :

Be the First to upvote.


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