column-span
Makes an element span all columns in multi-column layout. For full-width headings or dividers.
Class List
| Class | CSS | Description |
|---|---|---|
csa | column-span: all | Spans all columns for full-width display |
Visual Demo
The box below is a real multi-column flow. Only the middle subheading carries the spanning class, so it stretches across the columns while the body splits above and below it.
The first part of the multi-column body. Text fills one column and continues in the next, and that flow keeps going until it reaches the subheading below.
A subheading spanning the columns
After the subheading the flow starts over, because a spanning element cuts the document into two separate blocks of columns.
Usage Examples
Display specific elements (headings, banners) at full width in multi-column layout.
<!-- Full width title within column layout -->
<div class="cw200px cg2rem">
<p>The first paragraph is placed within columns.</p>
<h2 class="csa">This title spans across all columns</h2>
<p>Subsequent paragraphs are split into columns again.</p>
<p>Multi-column layout continues.</p>
</div>Class Details
csacolumn-span: all
Lays the element across every column at full width. Use it for subheadings, pull quotes, image banners and dividers inside multi-column copy. Content before and after it fills columns separately, so it also works as a semantic break in the document.
<!-- Divider that spans the columns and restarts the flow -->
<div class="cw25rem cg3-2rem">
<p class="fs14px c71717A lh1-7">Intro paragraph flowing in columns.</p>
<hr class="csa bn h1px bg27272A my2rem" />
<p class="fs14px c71717A lh1-7">Everything after the rule starts a new column group.</p>
</div>Practical Example — Newsletter Body
A newsletter whose body flows across columns with a full-width subheading and a quote card wedged in. The spanning elements act as section dividers.
<article class="cw25rem cg3-2rem p3-2rem bg18181B br8px">
<h1 class="csa fs3-2rem fw800 cFAFAFA lh1-3 mb16px">This week in Atomic</h1>
<p class="fs14px c71717A lh1-7 mb16px">Two new utility groups landed, plus a
smaller build for the prebuilt stylesheet.</p>
<p class="fs14px c71717A lh1-7 mb16px">The docs site now ships per-class detail
sections for every property page.</p>
<blockquote class="csa bl4pxsolid6366F1 pl16px py12px my2rem">
<p class="fs16px cFAFAFA lh1-6">Spanning elements double as section dividers.</p>
</blockquote>
<p class="fs14px c71717A lh1-7">Copy after the quote starts a fresh column group,
so the sections never bleed into each other.</p>
</article>Tips / Caveats
A spanning element breaks the flow
Content before and after the spanning element becomes two separate column groups. If the first part is short, the upper columns can be left only half filled.
Do not combine it with float or absolute positioning
Spanning only applies to in-flow blocks. It is ignored on absolutely positioned or floated elements, so the placement will not be what you expect.
The none value is the default state, not a class
Elements inside a multi-column flow already do not span. To undo it, remove the class rather than adding another one.
It only means something inside a multi-column container
If the parent has no column width or column count, nothing happens at all. When you see no effect, check the parent before the element.
Nested columns span only the nearest container
With a multi-column block inside another one, spanning reaches the width of the inner container only. Do not expect it to cover the outer layout.
column-span supports only all or none
Per CSS spec, column-span cannot specify column counts. Either all or none.
Content flow is interrupted
Content splits before/after csa element. Layout may differ from expectations.