Layout
column-span
column-span sets whether an element inside a multi-column layout spans all the columns, running the full width.
Syntax
none | allPreview
The quick brown fox jumps over the lazy dog.Heading 見出し素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
column-count: 2;
}
.box > :nth-child(2) {
column-span: all;
}Controls
column-spanall
The quick brown fox jumps over the lazy dog.Heading 見出し素早い茶色の狐がのろまな犬を飛び越える。
About
Values
none: the initial value. The element sits inside one column, like the rest of the content.all: the element spans all the columns. The content before it is split into columns of equal height above it, and the content after it starts new columns below it.
When to use it
Use it for a full-width heading or figure in the middle of a multi-column article. The text before the heading is balanced into columns of equal height even with column-fill: auto.
Things to watch
- It goes on a block element inside the multi-column box, not on the box itself (the element with
column-countorcolumn-width). It has no effect on inline elements or on elements withfloatorposition: absolute. - It also works on deeper descendants, but not when an element in between starts a new block formatting context (
display: flow-root, for example) or has atransform. - A number of columns such as
column-span: 2, andauto, are in the CSS Multi-column Layout Level 2 draft, but no browser supports them yet.
In the preview, a supporting declaration makes the box two columns (column-count: 2). The value applies to the yellow heading (the second child): with all the heading runs the full width, and the English sentence before it is split into two columns above it.