CSS column-span Property

CSS column-span Property

The column-span property in CSS controls whether an element spans across multiple columns in a multi-column layout. It is commonly used for headings or elements that need to break column flow.

1. Syntax

selector {
  column-span: none | all;
}

Value	Description
none (default)	The element stays within a single column.
all	The element spans across all columns.

✅ Only works on block-level elements inside a multi-column container.

2. Example – Spanning a Heading Across All Columns

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

h2 {
  column-span: all;
  text-align: center;
  background: lightgray;
  padding: 10px;
}

<div class="multi-column">
  <h2>Section Title</h2>
  <p>Text flows into multiple columns.</p>
  <p>More text continues across the columns.</p>
</div>

✅ The <h2> spans across all columns, while the text continues in columns.

3. When to Use column-span?

✔ Use for headings or images that should break the column flow.
✔ Works best inside a column-count or column-width layout.
✔ Does NOT work on flexbox or grid layouts.

4. Best Practices

✔ Use column-span: all; sparingly for readability.
✔ Combine with column-gap for better spacing.
✔ Ensure compatibility since some browsers may not support column-span well.