CSS | columns Property - GeeksforGeeks

08 Aug, 2019
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.<!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.
Syntax:
columns: auto auto;

Example 1: Using auto as the value.
<!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:<!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:
Syntax:
columns: column-width column-count;

Example 2:
<!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:<!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:
Syntax:
columns: initial initial;

Example 3:
<!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:<!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:
Syntax:
columns: inherit inherit;

Example 4:
<!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, 4.0 -webkit-
Edge 10.0
Firefox 52.0, 9.0 -moz-
Opera 37.0, 15.0 -webkit- 11.1
Safari 9.0, 3.1 -webkit-
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?