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 column-span Property
The CSS column-span property is used to specify how many columns an element should span across in a multi-column layout. This property allows specific elements to break out of the column flow and span across multiple or all columns.
Syntax
selector {
column-span: value;
}
Possible Values
| Value | Description |
|---|---|
none |
The element does not span multiple columns (default) |
all |
The element spans across all columns |
Example: Element Spanning All Columns
The following example demonstrates how a heading element spans across all columns in a multi-column layout −
<!DOCTYPE html>
<html>
<head>
<style>
.multi {
column-count: 3;
column-gap: 30px;
column-rule: 2px solid #ddd;
max-width: 600px;
text-align: justify;
}
.span-heading {
column-span: all;
background-color: #f0f0f0;
padding: 10px;
text-align: center;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="multi">
<p>This is the first paragraph that flows in the first column. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h2 class="span-heading">This heading spans all columns</h2>
<p>This paragraph continues after the spanning heading and flows across the remaining columns. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Another paragraph that demonstrates the multi-column layout continuing after the spanning element. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</body>
</html>
A multi-column layout with three columns separated by gray lines. The heading "This heading spans all columns" breaks across all columns with a gray background, while the paragraphs flow in the column layout above and below it.
Browser Support
The column-span property is supported in all modern browsers. Older versions may require vendor prefixes, but current browsers support the standard property.
Conclusion
The column-span property is essential for creating flexible multi-column layouts where certain elements need to break the column flow. Use column-span: all for headings or elements that should span across all columns.
Updated on: 2026-03-15T12:09:45+05:30
85 Views
Advertisements