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
Set how many columns an element should span across with CSS
The CSS column-span property allows an element to span across multiple columns in a multi-column layout. This is particularly useful for creating headings or other elements that should break the column flow.
Syntax
selector {
column-span: value;
}
Possible Values
| Value | Description |
|---|---|
none |
The element does not span across columns (default) |
all |
The element spans across all columns |
Example: Heading Spanning All Columns
The following example demonstrates how to make a heading span across all columns in a multi-column layout −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 3;
column-gap: 20px;
column-rule: 2px dashed maroon;
text-align: justify;
padding: 20px;
}
h1 {
column-span: all;
background-color: #f0f0f0;
padding: 10px;
margin: 0 0 20px 0;
text-align: center;
}
</style>
</head>
<body>
<div class="demo">
<h1>Article Title Spanning All Columns</h1>
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 eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</body>
</html>
A heading "Article Title Spanning All Columns" appears across the full width with a gray background, followed by text content split into three columns with dashed maroon dividers between them.
Example: Element Not Spanning Columns
This example shows the default behavior when column-span is set to none −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
column-count: 2;
column-gap: 30px;
column-rule: 1px solid #ccc;
padding: 15px;
}
.highlight {
column-span: none;
background-color: yellow;
padding: 5px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
This text flows in the first column. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="highlight">This highlighted text stays within its column</div>
More text continues in the column layout. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>
Text is displayed in two columns with a highlighted yellow box that stays within its respective column, not spanning across both columns.
Conclusion
The column-span property provides control over how elements behave in multi-column layouts. Use all to make headings or important content span across all columns, creating visual breaks in the column flow.
Updated on: 2026-03-15T13:04:03+05:30
222 Views
Advertisements