The CSS columns property is used to control both the number of columns and the width of those columns in a layout. It’s a shorthand property that allows you to set multiple values at once, such as the number of columns and their width.
This makes it easier to create multi-column layouts without manually defining each column’s style.
Try It:
3 Columns
2 Columns
Auto Columns
Currently Active Property:
columns: 3;
Syntax
columns: column-width columns-count | auto | initial | inherit;
Property Values
Here are the Property Values for the CSS columns Property:
| Property Value | Description |
|---|
auto | Sets the column-width and column-count to their default values defined by the browser. |
integer | Specifies the column-width and column-count using integer values. |
initial | Initializes the column-width and column-count values to their default initial values. |
inherit | Inherits the column-width and column-count values from its parent element. |
CSS columns Property Examples
Here are the Examples of the columns Property:
Example 1: CSS columns Property with Automatic Column Distribution
In this example, the columns property is used to split the content into multiple columns, where the number of columns and their width are automatically determined by the browser. The content inside the div with the class GFG will be laid out in as many columns as the browser can fit, based on the available space and content.
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. <div> <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> </div> </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.
Example 2: CSS columns Property for Multi-Column Layout
In this example, we use the CSS columns property to create a multi-column layout. The text content inside the div with the class GFG is split into five columns, each with a minimum width of 60px. The columns property works across browsers, with specific vendor prefixes for better compatibility.
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. <div> <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> </div> </div> </body> </html> Output:
Supported Browser
The browsers supported by columns Property are listed below:
Note: Ensure to test on older browser versions for compatibility, as some may require vendor prefixes (-webkit, -moz) for full functionality.