Layout
column-span
Let a block cross the columns of a multi-column container.
Overview
| Class | Declarations |
|---|---|
column-span:all | column-span: all;
|
column-span:none | column-span: none;
|
column-span:<value> | column-span: <value>;
|
Column flow
Start with the collection overview and its key details.
Collection notes
Continue through each column in reading order, then move to the next section.
Choose all or none in the syntax table to change how the blue block participates in this two-column flow.
Examples
Span across all columns
Use column-span:all for a heading that should cross the columns of a multi-column container. Content after it resumes flowing through columns.
Span across all columns
The highlighted heading belongs to the column flow. With all, it crosses the column set and the following text resumes below it.
<article class="columns:2"> <p>Start with the collection overview and its key details.</p> <h2 class="column-span:all">Collection notes</h2> <p>The next section continues through the columns below the heading.</p> <p>Read down each column before moving to the next.</p></article>Generated CSS
@layer utilities { .column-span\:all { column-span: all }}Does not span multiple columns
Use column-span:none to keep an element inside the current column.
Does not span multiple columns
The highlighted heading belongs to the column flow. With all, it crosses the column set and the following text resumes below it.
<article class="columns:2"> <p>Start with the collection overview and its key details.</p> <h2 class="column-span:none">Collection notes</h2> <p>The heading stays in the same flow as the surrounding text.</p> <p>Read down each column before moving to the next.</p></article>Use inside multi-column layouts
Place the spanning block in a multi-column container. This property does not span Grid tracks; use grid-column for that layout.
Use inside multi-column layouts
The highlighted heading belongs to the column flow. With all, it crosses the column set and the following text resumes below it.
<article class="columns:3"> <p>Start with the collection overview and its key details.</p> <h2 class="column-span:all">Collection notes</h2> <p>The next section continues through the columns below the heading.</p> <p>Read down each column before moving to the next.</p></article>Apply conditionally
Keep the heading in its column initially, then span the full column set at sm or in print. The preview supplies a multi-column parent so the change is visible. See conditions.
Apply conditionally
The highlighted heading belongs to the column flow. With all, it crosses the column set and the following text resumes below it.
<article class="columns:2"> <p>Start with the collection overview and its key details.</p> <h2 class="column-span:none column-span:all@print column-span:all@sm">Collection notes</h2> <p>The next section follows the heading in reading order.</p> <p>Read down each column before moving to the next.</p></article>