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
Shorthand property to set columns with CSS
The CSS columns property is a shorthand that allows you to set both the column width and column count for multi-column layouts. This property combines column-width and column-count into a single declaration.
Syntax
selector {
columns: column-width column-count;
}
Possible Values
| Value | Description |
|---|---|
column-width |
Specifies the optimal width for each column (px, em, rem, etc.) |
column-count |
Specifies the number of columns (integer value) |
auto |
Browser determines the value automatically |
Example
The following example creates a 4-column layout with 100px optimal column width and adds styling rules −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
columns: 100px 4;
column-rule-style: dashed;
column-rule-color: gray;
column-rule-width: 1px;
text-align: justify;
padding: 20px;
}
</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.
</div>
</body>
</html>
Text content is displayed in a 4-column layout with 100px optimal column width. Gray dashed lines separate the columns, and the text flows from one column to the next.
Conclusion
The columns property provides an efficient way to create multi-column layouts by combining column width and count specifications. It's ideal for creating newspaper-style text layouts.
Updated on: 2026-03-15T13:04:15+05:30
205 Views
Advertisements