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
CSS3 Multi-Column Property
CSS3 multi-column properties allow you to arrange text in a newspaper-style layout with multiple columns. This feature is useful for creating magazine-style layouts and improving text readability in wide containers.
Syntax
selector {
column-count: number;
column-gap: length;
column-rule: width style color;
column-span: value;
}
Multi-Column Properties
| Property | Description |
|---|---|
column-count |
Specifies the number of columns to divide content into |
column-gap |
Sets the gap between columns |
column-rule |
Shorthand for setting column rule width, style, and color |
column-rule-width |
Specifies the width of the rule between columns |
column-rule-style |
Defines the style of the rule between columns |
column-rule-color |
Sets the color of the rule between columns |
column-span |
Specifies how many columns an element should span |
column-fill |
Controls how content is distributed among columns |
Example: Basic Multi-Column Layout
The following example creates a 3-column layout with gaps and rules −
<!DOCTYPE html>
<html>
<head>
<style>
.multi-column {
column-count: 3;
column-gap: 30px;
column-rule: 2px solid #333;
text-align: justify;
padding: 20px;
}
</style>
</head>
<body>
<div class="multi-column">
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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
Text content is displayed in 3 equal columns with 30px gaps between them and solid dark lines separating each column.
Example: Column Span
This example shows how to make a heading span across all columns −
<!DOCTYPE html>
<html>
<head>
<style>
.article {
column-count: 2;
column-gap: 25px;
column-rule: 1px dashed #666;
}
.title {
column-span: all;
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="article">
<h2 class="title">Article Title</h2>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
</div>
</body>
</html>
A centered title spans across the full width, followed by text content divided into 2 columns with dashed separator lines.
Conclusion
CSS3 multi-column properties provide an efficient way to create newspaper-style layouts. Use column-count to set the number of columns, column-gap for spacing, and column-rule for visual separators between columns.
Updated on: 2026-03-15T12:08:39+05:30
120 Views
Advertisements