The column-span
property enables an element to span across columns.
This property is used by headings that span multi-column layouts.
An <h2>
element (heading) with a column-span
value of all
.
<div style="column-count:3">
<h2 style="column-span: all;">
Paul Gauguin, a Post-Impressionist Artist
</h2>
Paul Gauguin was a French Post-Impressionist
artist. Unappreciated until after his death,
Gauguin is now recognized for his experimental
use of color and Synthetist style that were
distinct from Impressionism. Toward the end
of his life, he spent ten years in French
Polynesia. The paintings from this time
depict people or landscapes from that region.
His work was influential on the French
avant-garde and many modern artists, such
as Pablo Picasso and Henri Matisse, and he
is well known for his relationship with
Vincent and Theo van Gogh. Gauguin's art
became popular after his death, partially
from the efforts of dealer Ambroise Vollard,
who organized exhibitions of his work late in
his career and assisted in organizing two
important posthumous exhibitions in Paris.
</div>
Not all browers support column-span
.
column-span: none | all | initial | inherit;
Value | Description |
---|---|
none | Default, spans element across one column |
all | Spans element across all columns |
initial | Sets the value to its default value. |
inherit | Inherits the value from its parent element. |
Click the buttons to see different column-span
values.
<style>
.column-span-example {
column-span: none;
}
</style>
<div style="column-count:3">
<h2 class="column-span-example">
Paul Gauguin, a Post-Impressionist Artist
</h2>
Paul Gauguin was a French Post-Impressionist
artist. Unappreciated until after his death,
Gauguin is now recognized for his experimental
use of color and Synthetist style that were
distinct from Impressionism. Toward the end
of his life, he spent ten years in French
Polynesia. The paintings from this time
depict people or landscapes from that region.
His work was influential on the French
avant-garde and many modern artists, such
as Pablo Picasso and Henri Matisse, and he
is well known for his relationship with
Vincent and Theo van Gogh. Gauguin's art
became popular after his death, partially
from the efforts of dealer Ambroise Vollard,
who organized exhibitions of his work late in
his career and assisted in organizing two
important posthumous exhibitions in Paris.
</div>
This table shows when column-span
support started for each browser.
Chrome
|
50.0 | Apr 2016 |
Firefox
|
Not supported | |
IE/Edge
|
10.0 | Sep 2012 |
Opera
|
37.0 | May 2016 |
Safari
|
9.0 | Sep 2015 |