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
Create a Column Layout using CSS
Web developers can organize and structure content in a visually appealing way by utilizing CSS to create a column layout. Developers can define the number of columns by using the column-count property, while the column-gap property regulates the distance between them. This technique maximizes available space and improves readability, especially for webpages with a lot of text.
Syntax
selector {
column-count: number;
column-width: length;
column-gap: length;
column-rule: width style color;
}
Key Properties for Column Layout
| Property | Description |
|---|---|
column-count |
Defines the number of columns |
column-width |
Sets the optimal width for each column |
column-gap |
Controls the spacing between columns |
column-rule |
Creates a divider line between columns |
Example 1: Using Column Count
Let's look at the following example, where we use the column-count property to specify the number of columns −
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
column-count: 2;
color: #DE3163;
font-family: verdana;
font-size: 15px;
background-color: #D5F5E3;
padding: 20px;
}
</style>
</head>
<body>
<div class="tutorial"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more. </div>
</body>
</html>
The text is automatically split into two columns with a light green background, creating a newspaper-like layout.
Example 2: Using Column Width
In this example, we use the column-width property to specify the optimal width for columns −
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
column-width: 150px;
font-family: verdana;
font-size: 12px;
color: #DE3163;
padding: 20px;
}
</style>
</head>
<body style="background-color:#E8DAEF">
<div class="tutorial"> Our Text Library Content and resources are freely available and we prefer to keep it that way to encourage our readers acquire as many skills as they would like to. We don't force our readers to sign up with us or submit their details either to use our Free Text Tutorials Library. No preconditions and no impediments, Just Simply Easy Learning! We have established a Digital Content Marketplace to sell Video Courses and eBooks at a very nominal cost. You will have to register with us to avail these premium services. </div>
</body>
</html>
The browser automatically creates multiple columns based on the available space, with each column approximately 150px wide.
Example 3: Adding Column Rules
In this example, we add visual separators between columns using column-rule properties −
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
font-family: verdana;
color: #DE3163;
background-color: #D6EAF8;
column-count: 2;
column-gap: 50px;
column-rule: 2px solid #333;
padding: 20px;
}
</style>
</head>
<body>
<div class="tutorial"> MS Dhoni probably ranks as the third-most popular Indian cricketer ever, behind only Sachin Tendulkar and Virat Kohli. He emerged from a cricketing backwater, the eastern Indian state of Jharkhand, and made it to the top with a home-made batting and wicketkeeping technique, and a style of captaincy that scaled the highs and hit the lows of both conservatism and unorthodoxy. Under Dhoni's leadership, India won the top prize in all formats: leading the Test rankings for 18 months starting December 2009, winning the 50-over World Cup in 2011, and the T20 world title on his captaincy debut in 2007. </div>
</body>
</html>
The text is divided into two columns with a 50px gap and a solid vertical line separator between the columns.
Conclusion
CSS column layouts provide an efficient way to organize text content into multiple columns, similar to newspapers and magazines. The combination of column-count, column-width, and column-rule properties gives developers full control over the appearance and spacing of multi-column text layouts.
457 Views
