Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Setting Column Count or Width using CSS3
Use the columns property in CSS3 to set the column count and width. It is a shorthand property for column-width and column-count properties. With that, you can set both the properties separately as well.
Syntax
selector {
columns: auto | column-width column-count | initial | inherit;
}
The columns Property
The columns property works as a shorthand property for the column-width and column-count properties. You can specify both width and count in a single declaration.
Example 1: Auto Values
The following example sets both the column width and count to auto value, allowing the browser to determine the optimal column layout −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
columns: auto auto;
text-align: justify;
padding: 20px;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today's Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>
Text flows in automatically determined columns based on container width and browser optimization.
Example 2: Specific Width and Count
Here, we set the column width to 150px and column count to 3 −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
columns: 150px 3;
text-align: justify;
padding: 20px;
column-gap: 20px;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today's Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>
Text is arranged in 3 columns, each approximately 150px wide with 20px gaps between columns.
The column-count Property
To set the specific number of columns, use the column-count property. This property defines how many columns the content should be divided into.
selector {
column-count: number | auto | initial | inherit;
}
Example
The following example creates exactly 4 columns −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
text-align: justify;
padding: 20px;
column-gap: 15px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condimentum bibendum mi, nec scelerisque erat porta vitae. Nulla efficitur laoreet mauris, vel commodo risus tincidunt eu. Praesent et accumsan nisl. Sed quis finibus tortor, vitae pellentesque dui. Donec auctor libero libero, vitae vestibulum nibh condimentum at. Nam diam ipsum, rhoncus sed ultricies at, suscipit eget metus. Integer in ligula a velit congue semper et eu nisi.
</div>
</body>
</html>
Text content is evenly distributed across 4 columns with consistent spacing between them.
The column-width Property
To set the optimal width for columns, use the column-width property. The browser will create as many columns as can fit with the specified width.
selector {
column-width: length | auto | initial | inherit;
}
Example
The following example sets each column to be approximately 120px wide −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-width: 120px;
text-align: justify;
padding: 20px;
column-gap: 20px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condimentum bibendum mi, nec scelerisque erat porta vitae. Nulla efficitur laoreet mauris, vel commodo risus tincidunt eu. Praesent et accumsan nisl. Sed quis finibus tortor, vitae pellentesque dui. Donec auctor libero libero, vitae vestibulum nibh condimentum at. Nam diam ipsum, rhoncus sed ultricies at, suscipit eget metus.
</div>
</body>
</html>
Browser creates multiple columns, each approximately 120px wide, with the number of columns determined by available space.
Conclusion
CSS3 column properties provide flexible ways to create multi-column layouts. Use columns as a shorthand, column-count for specific column numbers, and column-width for responsive column sizing based on optimal width.
381 Views
