Open In App
Related Articles

CSS columns Property

Improve Article
Improve
Save Article
Save
Like Article
Like

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;

PropertyValues:

  • 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. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | columns Property
    </title>
    <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.
  
        <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 being a part of a development. Off
              from work, you canfind 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>


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: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | columns Property
    </title>
    <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.
  
        <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 being a part of a development. Off
              from work, you canfind 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>


Output:

 

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

Syntax: 

columns: initial initial;

Example 3: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | columns Property
    </title>
    <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.
  
        <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 being a part of a development. Off
              from work, you canfind 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>


Output: 

  • inherit: Inherits the value from its parent element. 

Syntax: 

columns: inherit inherit;

Example 4: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | columns Property
    </title>
    <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.
  
        <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 being a part of a development. Off
              from work, you canfind 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>
  
  
</html>


Output:

 

Supported Browser: The browsers supported by columns Property are listed below:

  • Chrome 50.0 and above
  • Edge 12.0 and above
  • Firefox 52.0 and above
  • Internet Explorer 10.0 and above
  • Opera 11.1 and above
  • Safari 9.0 and above

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 02 Jun, 2023
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials