column-span:all lets an in-flow block span every column in a multi-column container. It is not a Grid span and does not accept a count of columns.
Span a heading across the flow
The heading uses the full container width. The following prose begins a new column set beneath it.
HTML and CSS
HTML
<section class="reading">
<h2>Practice notes</h2>
<p>
Begin with a small document. Add a heading and a paragraph. Check the
reading order before changing the appearance.
</p>
<p>
Give the container room to show the layout. Change one value at a time, then
compare the result with the original.
</p>
<p>
At a narrow width, keep the text readable. A layout that works on a large
screen may need fewer columns on a phone.
</p>
</section>CSS
.reading {
columns: 2;
column-gap: 1.5rem;
}
h2 {
column-span: all;
background: #eff6ff;
padding: 0.5rem;
font-size: 1.25rem;
}
p {
margin-top: 0;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Interrupt columns with a full-width note
Content before the spanning block is balanced into a preceding column set. Content after it resumes in a new set. A spanner can therefore change where nearby prose breaks.
HTML and CSS
HTML
<div class="reading">
<p>
Begin with a small document. Add a heading and a paragraph. Check the
reading order before changing the appearance.
</p>
<p>
Give the container room to show the layout. Change one value at a time, then
compare the result with the original.
</p>
<p>
At a narrow width, keep the text readable. A layout that works on a large
screen may need fewer columns on a phone.
</p>
<p class="note">Check the reading order when adding a spanner.</p>
<p>
Begin with a small document. Add a heading and a paragraph. Check the
reading order before changing the appearance.
</p>
<p>
Give the container room to show the layout. Change one value at a time, then
compare the result with the original.
</p>
<p>
At a narrow width, keep the text readable. A layout that works on a large
screen may need fewer columns on a phone.
</p>
</div>CSS
.reading {
columns: 2;
column-gap: 1.5rem;
}
.note {
column-span: all;
padding: 0.75rem;
border-block: 2px solid #2563eb;
}
p {
margin-top: 0;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Values and defaults
The initial value is none and the property is not inherited. None leaves an element in its normal column; all spans the columns and establishes a new block formatting context. The spanning box must participate in the multicol flow; positioned or floated boxes do not behave as ordinary in-flow spanners.
Common mistakes
Column-span:2 is invalid. This property does not work as grid-column:1 / -1, and a nested formatting context can prevent a descendant from acting as a spanner for an outer multicol container. Test fragmentation around the spanner, not just its width. Use headings for actual sections, rather than for an appearance-only wide label.
Learn columns, column-fill, and grid-column.
Sources and browser support
MDN: column-span describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.