Skip to content
Related Articles

Related Articles

CSS | columns Property

View Discussion
Improve Article
Save Article
  • Last Updated : 02 Aug, 2022

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!