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
How to arrange text in multi-columns using CSS3?
The CSS column-count property is used to divide an HTML element's content into the specified number of columns, creating a multi-column layout similar to newspapers or magazines. This property is part of the CSS3 multi-column layout module.
Syntax
selector {
column-count: number;
}
Here, number is a positive integer value that represents the number of columns you want to arrange the text into.
Possible Values
| Value | Description |
|---|---|
number |
A positive integer specifying the number of columns |
auto |
Default value. Number of columns determined by other properties |
Example 1: Three Column Layout
In this example, we will arrange a paragraph's content into 3 columns using the column-count property
<!DOCTYPE html>
<html>
<head>
<style>
.three-columns {
column-count: 3;
column-gap: 20px;
text-align: justify;
line-height: 1.6;
padding: 20px;
}
</style>
</head>
<body>
<h3>Three Column Text Layout</h3>
<p class="three-columns">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</body>
</html>
The text is divided into three equal columns with 20px spacing between them, creating a newspaper-like layout.
Example 2: Two Column Layout
Here, we will create a two-column layout for better readability of longer text
<!DOCTYPE html>
<html>
<head>
<style>
.two-columns {
column-count: 2;
column-gap: 30px;
column-rule: 2px solid #ccc;
text-align: justify;
line-height: 1.8;
padding: 25px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h3>Two Column Text Layout</h3>
<p class="two-columns">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</body>
</html>
The text is arranged in two columns with a vertical line separator and light gray background, creating an elegant reading layout.
Related Properties
The column-count property works well with other multi-column properties:
- column-gap: Controls spacing between columns
- column-rule: Adds a border between columns
- column-width: Specifies optimal column width
Conclusion
The column-count property provides an easy way to create multi-column text layouts in CSS3. It automatically distributes content across the specified number of columns, making it perfect for creating newspaper-style layouts and improving text readability.
94 Views
