CSS columns Property
Last Updated :
03 Apr, 2024
CSS 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.Â
Try It:
3 Columns
2 Columns
Auto Columns
Currently Active Property:
columns: 3;
Syntax:
columns: column-width columns-count | auto | initial | inherit;
Property Values:
| 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
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.
<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:Â
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:
- 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...