CSS column-span Property
The column-span CSS property defines how to span the element across one column or all columns. Learn about values and see examples.
The column-span property defines whether an element spans across one column or all columns. It is one of the CSS3 properties. It has four values: none, all, initial, and inherit. none is the default value, keeping the element within a single column. The all value makes the element span across all columns. This property is useful for wide elements, such as images or headings, allowing you to choose whether they span all columns or remain in one.
Info
An element can be spanned across columns only if it is a block-level element.
| Initial Value | none |
|---|---|
| Applies to | in-flow block-level elements |
| Inherited | No. |
| Animatable | No. |
| Version | CSS Multi-column Layout Module Level 1 |
| DOM Syntax | object.style.columnSpan = "all"; (Note: CSS properties use camelCase in JavaScript) |
Syntax
Syntax of CSS column-span Property
column-span: none | all | initial | inherit;Example: none value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: none;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Result
In the following example, the heading spans across all four columns.
Example: all value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: all;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Example: initial value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: initial;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Example: inherit value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: inherit;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| none | This is the default value. The element does not span across all columns; it remains in one column. | Play it » |
| all | The element spans across all columns. | Play it » |
| initial | Sets the property to its default value. | Play it » |
| inherit | Inherits the property from its parent element. |
Practice
Practice
What is the function of the 'column-span' property in CSS?