Ever needed to make a single piece of text appear in multiple columns? You could solve the problem by splitting the content into different markup elements and then styling accordingly. However, altering markup for purely stylistic purposes is never ideal. The CSS multi-column layout specification describes how we can span one or more pieces of content across multiple columns with ease. Consider the following markup:

<main>
    <p>lloremipsimLoremipsum dolor sit amet, consectetur
<!-- LOTS MORE TEXT -->
</p>
    <p>lloremipsimLoremipsum dolor sit amet, consectetur
<!-- LOTS MORE TEXT -->
</p>
</main>

With CSS multi-columns you can make all that content flow across multiple columns in a number of ways. You could make the columns a certain column width (for example, 12em) or instead you could specify that the content needs to span a certain number of columns (for example, 3).

Let's look at the code needed to achieve each of those scenarios. For columns of a set width, use the following syntax:

main {
  column-width: 12em;
}

This will mean, no matter the viewport size, the content will span across columns that are 12em in width. Altering the viewport will adjust the number of columns displayed dynamically. You can view this in the browser by looking at example_05-01 (or at the GitHub repository: https://github.com/benfrain/rwd).

Consider how the page renders on an iPad in portrait orientation (768px wide viewport):

And then on Chrome in the desktop (approximately 1100px wide viewport):

Simple responsive text columns with minimum work; I like it!

main {
  column-count: 4;
}

Adding a gap and column divider

We can take things even further by adding a specified gap for the columns and a divider:

main {
  column-gap: 2em;
  column-rule: thin dotted #999;
  column-width: 12em;
}

This gives us a result like the following:

To read the specification on the CSS3 Multi-column Layout Module, visit http://www.w3.org/TR/css3-multicol/.

For the time being, despite being at CR status at the W3C, you'll likely still need vendor prefixes on the column declarations for maximum compatibility.

The only caveat I would place on using CSS multi-column is that for longer spans of text it can lead to a flawed user experience. In these instances the user will have to scroll up and down the page to read the columns of text, which can become a little laborious.