Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Column Layout using CSS
Web developers can organize and structure content in a visually good-looking 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.
A responsive and flexible layout that easily adjusts to different screen sizes and offers a consistent user experience across devices can be created by utilizing CSS rules. Gaining proficiency with column layouts improves a website's general usability and appearance, adding to its polished and professional design.
Example
Let's look at the following example, where we are going to use the column-count property and mention the number of columns.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
column-count: 2;
color: #DE3163;
font-family: verdana;
font-size: 15px;
background-color: #D5F5E3;
}
</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>
When we run the above code, it will generate an output consisting of the text that is separated into two columns displayed on the webpage.
Example
Considering another scenario, where we are going to use the column-width property to specify the optimal width.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
column-width: 80px;
font-family: verdana;
font-size: 12px;
color: #DE3163;
}
</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>
On running the above code, the output window will pop up, displaying the text mentioned with a column width on the webpage.
Example
In the following example, we are going to use the column-rule-width property to specify the rule between the columns.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
font-family: verdana;
color: #DE3163;
background-color: #D6EAF8;
column-count: 2;
column-gap: 50px;
column-rule-style: solid;
column-rule-width: 2px
}
</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>
When we run the above code, it will generate an output consisting of the text separated into columns displayed on the webpage.
167 Views
