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
Selected Reading
How to specify the number of columns an element should be divided into with CSS
The CSS column-count property is used to specify the number of columns an element should be divided into. This property enables you to create newspaper-style multi-column layouts for text content.
Syntax
selector {
column-count: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Default value. Number of columns determined by other properties |
number |
Positive integer specifying the number of columns |
Example: Creating 4 Columns
The following example demonstrates how to divide text content into 4 columns −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-gap: 20px;
text-align: justify;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="demo">
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
</div>
</body>
</html>
The text content is automatically divided into 4 equal columns with 20px spacing between columns. The text flows from one column to the next, creating a newspaper-style layout.
Example: Different Column Counts
You can easily change the number of columns by adjusting the column-count value −
<!DOCTYPE html>
<html>
<head>
<style>
.two-columns {
column-count: 2;
column-gap: 30px;
margin-bottom: 20px;
padding: 15px;
background-color: #e8f4f8;
}
.three-columns {
column-count: 3;
column-gap: 25px;
padding: 15px;
background-color: #f0f8e8;
}
</style>
</head>
<body>
<div class="two-columns">
Two-column layout: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</div>
<div class="three-columns">
Three-column layout: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</div>
</body>
</html>
Two separate text blocks are displayed - the first divided into 2 columns with blue background, and the second divided into 3 columns with green background, each with different column spacing.
Conclusion
The column-count property provides an easy way to create multi-column layouts. Combined with column-gap, it offers flexible control over text presentation and readability.
Updated on: 2026-03-15T13:02:20+05:30
309 Views
Advertisements