CSS column-span Property

What You’ll Learn

The column-span property lets an element break out of the column flow and stretch across every column in a multi-column container.

Definition and Usage

The column-span CSS property specifies how many columns an element should span across in a multi-column layout. It is particularly useful when you want a specific element to break out of the column structure and span all columns, creating a visually distinct section within the layout.

Apply it to child elements inside a container that uses column-count or column-width. Common use cases include article headings, hero banners, pull quotes, and full-width dividers between sections of flowing text.

📝 Syntax

The syntax for column-span is simple — it takes one of two values: none or all.

selector {
  column-span: value;
}

Basic Example

.container {
  column-count: 3;
  column-gap: 20px;
}

.spanning-element {
  column-span: all;
  background-color: lightblue;
  padding: 10px;
  text-align: center;
}

Syntax Rules

• The initial value is none — the element stays in the column flow.
• all makes the element span every column in its multi-column parent.
• Apply to direct or nested children inside a multi-column container.
• Does not accept numeric values like 2 — only none and all.
• Works well with headings, banners, and callout boxes in magazine-style layouts.

💎 Property Values

The column-span property accepts only two keyword values.

Examples Gallery

Try a spanning banner, article heading, mid-article callout, and bottom footer note.

<style>
  .container {
    column-count: 3;
    column-gap: 20px;
  }
  .spanning-element {
    column-span: all;
    background-color: lightblue;
    padding: 10px;
    text-align: center;
  }
</style>

<div class="container">
  <div class="spanning-element">This heading spans across all columns</div>
  <p>...</p>
</div>

.article {
  column-count: 2;
  column-gap: 2rem;
}

.article h2 {
  column-span: all;
  margin: 0 0 1rem;
  border-bottom: 2px solid #334155;
  padding-bottom: 0.5rem;
}

.callout {
  column-span: all;
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 1rem;
  margin: 1rem 0;
}

.article-footer {
  column-span: all;
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
  font-size: 0.875rem;
  color: #64748b;
  text-align: center;
}

💡 Best Practices