column-span

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">
  <h1>A</h1>
  <ul>
    <li>aardvark</li>
    <li>aardwolf</li>
    <li>aasvogel</li>
    <li>abacuses</li>
    <li>abalones</li>
  </ul>
  <hr>

  <h1>B</h1>
  <ul>
    <li>baalisms</li>
    <li>baaskaap</li>
    <li>baaskaps</li>
    <li>baasskap</li>
    <li>babassus</li>
  </ul>

  <hr>
  <h1>C</h1>
  <ul>
    <li>cabalism</li>
    <li>cabalist</li>
    <li>caballed</li>
    <li>cabarets</li>
    <li>cabbaged</li>
  </ul>  
</div>

.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

• columns
• column-fill
• column-gap
• column-rule
• column-count
• column-width

Browser Support

Firefox does not support this property.

Multi-column layout support:

Don’t forget your prefixes!