CSS column-span Property

Definition and Usage

The column-span property lets an in-flow block element span every column inside a multi-column container when set to all. That element is called a spanning element, or spanner.

The container needs a multi-column setup such as column-count, column-width, or the columns shorthand. The initial value is none. It is not inherited. Content before the spanner is balanced across columns; columns restart after it.

CSS Syntax

One keyword. Study and production: none or all.

Property Values

How to Use column-span

Create columns first, then mark the block that should break across them.

1. Put text in a container with column-count or columns.
2. Choose an in-flow block child (often a heading or banner).
3. Set column-span: all on that child so it spans the full width.
4. Leave other elements at the default none so they stay in the column flow.

Live Preview

The article stays in three columns. Only the banner’s column-span changes.

CSS Examples

Each snippet focuses on column-span. Column count is only there so the span can show. Use Try It Yourself for a live editor.

<style>
  article {
    column-count: 3;
  }

  h2 {
    column-span: none;
  }
</style>

<article>
  <h2>In one column</h2>
  <p>Text flows into three columns. The heading stays in the first column.</p>
  <p>More text fills the remaining columns beside and below the heading.</p>
</article>

<style>
  article {
    column-count: 3;
  }

  h2 {
    column-span: all;
  }
</style>

<article>
  <h2>Full-width heading</h2>
  <p>After the heading, text balances into three columns again.</p>
  <p>Spanners are common for article titles in newspaper-style layouts.</p>
</article>

<style>
  article {
    column-count: 3;
  }

  .banner {
    column-span: all;
    background: #dbeafe;
    padding: 8px;
  }
</style>

<article>
  <p>Opening text sits above the banner and balances across columns.</p>
  <div class="banner">Callout across all columns</div>
  <p>Text after the banner starts a fresh column set underneath.</p>
</article>

Key Takeaways