Last updated on

In a multi-column layout, you can make elements expand across the columns with column-span.

h2 {
 -webkit-column-span: all;
         column-span: all;

Assign column-span to an element inside of the multi-column layout to make it a spanning element. The multi-column layout will resume with the next non-spanning element.

The value of column-span can either be all or none.

Set an element with column-span: all to make it span the columns.

The value none for the property is the kill switch for a spanning element. You might use this when working with media queries to tell the spanning element to stop spanning.

<div class="example">


.example {
  -webkit-columns: 125px;
  -moz-columns: 125px;
  columns: 125px;
  max-width: 300px;
  margin: 2em auto 0;

hr {
  -webkit-column-span: all;
  -moz-column-span: all;
  column-span: all;
  margin: 1em auto;
  border-style: dashed;
  border-width: 1px 0 0;
  border-top-color: #e74c3c;

body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;

h1 {
  font-size: 7em;
  text-align: center;
  font-weight: 400;
  margin-bottom: 0.15em;
  color: #2c3e50;

ul {
  list-style: square;
  margin-left: 2em;

Related Properties

Browser Support

Firefox does not support this property.

Multi-column layout support:

Chrome Safari Firefox Opera IE Android iOS
Any 3+ 1.5+ 11.1+ 10+ 2.3+ 6.1+

Don’t forget your prefixes!

Leave a Reply

Your email address will not be published. Required fields are marked *