column-count

If you need an exact numbers of columns when designing a multi-column layout, use column-count.

.lead {
 -webkit-column-count: 3;
    -moz-column-count: 3;
         column-count: 3;
 }

Given the number of columns, the browser will evenly distribute the content in exactly that number of columns.

This property can also be used in the shorthand for columns and can be used in tandem with column-width. When both properties are declared column-count is the maximum number of columns.

Values

column-count can be auto or an integer.

Use auto if you are also using column-width. Think of it as a way of telling the browser, to letcolumn-width take the lead.

The integer, also known as the number of columns, must be greater than or equal to 0.

<div class="example">
  <i class="fa fa-mortar-board"></i>
  <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et.</p>
  <i class="fa fa-bank"></i>
  <p> Nulla vitae magna sed sapien ultricies dapibus a non libero. Fusce lobortis adipiscing purus vel rhoncus.</p>
  <i class="fa fa-life-ring"></i>
  <p>Proin blandit, tortor quis tristique porta, nisl est rhoncus turpis, non interdum nibh ligula sit amet dolor.</p>
  <i class="fa fa-bolt"></i>
  <p>Sed sagittis aliquam nulla vel viverra. Sed at augue eros. Nam tincidunt mi eu malesuada molestie.</p>
</div>

.example {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 3em;
  -moz-column-gap: 3em;
  column-gap: 3em;
}

body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 2em 1em 0;
}

.fa {
  font-size: 3em;
  text-align: center;
  margin-bottom: 0.5em;
  display: block;
  color: #2c3e50;
}

p {
  margin-bottom: 1.5em;
  text-align: center;
}
p:first-line {
  font-variant: small-caps;
  font-size: 1.2em;
}

Unlike column-width this property will hold the number of columns regardless of the browser width. This means that if you pulled up a 5-columned layout on your mobile phone, you will have a very squished 5-columned layout to navigate. column-count works best alongside column-width.

Related Properties

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

Browser Support

Multi-column layout support:

Don’t forget your prefixes!