columns

With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web. It’s like taking a newspaper, but as the paper gets smaller, the columns will adjust and balance automatically allowing the content to flow naturally.

.intro {
-webkit-columns: 300px 2;
   -moz-columns: 300px 2;
        columns: 300px 2;
}

The columns property will accept column-count, column-width, or both properties.

columns: <column-width> || <column-count>;

Using both column-count and column-width is recommended to create a flexible multi-column layout. The column-count will act as the maximum number of columns, while the column-widthwill dictate the minimum width for each column. By pulling these properties together, the multi-column layout will automatically break down into a single column at narrow browser widths without the need of media queries or other rules.

<div class="example">
  <h1>Sed dignissim lacinia nunc</h1>
  <p class="lead">Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
  <p>Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
  <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  </p>

  <p>Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>

  <p>Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.  </p>
</div>

.example {
  -webkit-columns: 4 150px;
  -moz-columns: 4 150px;
  columns: 4 150px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
}

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

h1 {
  -webkit-column-span: all;
  -moz-column-span: all;
  column-span: all;
  font-size: 2em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

p {
  margin-bottom: 1.3em;
  text-align: justify;
}

.lead {
  font-variant: small-caps;
  font-size: 1.3em;
  text-align: left;
  font-style: italic;
}

A multi-column layout works great on block elements including lists to make a flexible navigation.

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Clients</a></li>
  <li><a href="#">Contact</a></li>
</ul>

.nav {
  background: #2c3e50;
  -webkit-columns: 100px 4;
  -moz-columns: 100px 4;
  columns: 100px 4;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
  -webkit-column-rule: 1px solid #1a242f;
  -moz-column-rule: 1px solid #1a242f;
  column-rule: 1px solid #1a242f;
}

.nav a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 1em;
  text-align: center;
  border-bottom: 1px solid #1a242f;
}
.nav a:hover {
  background: #1a242f;
}

body {
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
}

To further fine tune your multi-column layout, use break-inside on specific elements to keep them from getting stuck between columns.

Related Properties

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

Browser Support

Multi-column layout support:

Don’t forget your prefixes!