CSS columns Property
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:
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.
<!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.
<!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.
CSS columns Property – FAQs
How to display items in multiple columns in CSS?
You can use the columns property to display items in multiple columns by specifying either the number of columns or their width, like this: columns: 3; or columns: 200px;.
What is the CSS property for column width?
The column-width property sets the width of columns in a multi-column layout. For example, column-width: 150px; defines each column to be 150px wide.
How to make separate columns in CSS?
You can create separate columns using the column-count or columns properties. For example, column-count: 3; will split the content into three columns.
What CSS property can be used to create multiple columns?
The columns property is a shorthand for setting both the column width and column count, which helps create multiple columns in a layout.
How do you specify column width in CSS?
You can specify column width using the column-width property or as part of the shorthand columns property. For example, column-width: 200px; or columns: 200px 3; (for width and count).
