Column Span

Sometimes in a multi-column layout, you want an element to break out and span across all columns. Think of a newspaper where a headline stretches across the full width while the body text stays in columns. That is what column-span does.

How Column Span Works

The column-span property accepts two values: none (the default) and all. When set to all, the element spans across all columns in the multi-column container.

.article {
  column-count: 3;
  column-gap: 30px;
}

.full-width-heading {
  column-span: all;
  font-size: 32px;
  margin-bottom: 20px;
}

.image-across {
  column-span: all;
  margin: 20px 0;
}
    

The spanning element sits between the column content. Text before it flows in columns, the spanning element takes the full width, and text after it continues in columns.

Practical Example

Here is a realistic layout with a heading, an image, and body text. The heading and image span all columns while the text stays in a nice readable column layout.

.magazine-layout {
  column-count: 3;
  column-gap: 24px;
  column-rule: 1px solid #eee;
}

.magazine-layout h2 {
  column-span: all;
  font-size: 28px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #333;
}

.magazine-layout .hero-image {
  column-span: all;
  margin-bottom: 20px;
}

.magazine-layout p {
  margin-bottom: 12px;
  line-height: 1.7;
}
    

This creates a professional-looking layout with minimal code. The heading and hero image break out of the columns, while the paragraphs flow naturally in the three-column grid.

Limitations

Currently, column-span only supports none and all. You cannot span a specific number of columns (like spanning 2 out of 3). For that kind of control, CSS Grid is a better choice. Multi-column layout works best for flowing text content, not complex grid-based designs.