How the CSS text columns on this site work

Multi-column text works in pretty much all modern browsers

Posted September 13, 2015 in Front End Dev

You may have noticed that many of the posts and pages on this site have text that flows into two columns (but strangely not this one; click here for an example). These CSS text columns are easy to implement, but they do require some browser-specific prefixes.

First the syntax:

.article-columns {
 -webkit-columns: 200px 2;
 -moz-columns: 200px 2;
 columns: 200px 2;
 -webkit-column-gap: 30px;
 -moz-column-gap: 30px;
 column-gap: 30px;
}

The first three lines tell the browser how many columns you want, and the minimum width the columns should be. I wanted columns no smaller than 200px each, and I wanted 2. You could change this to something like 150px 3 if you wanted more, but narrower, columns.

You can also specify the size of the gap between columns, which here is 30 pixels.

Here’s the neat thing: if the browser window is too small to support two, 200-pixel columns, it will automatically collapse into a single column. No media queries necessary!

Multi-column text layout is supported by most modern browsers, either completely or via prefixes. IE supports it in versions 10 and higher. Text columns are nice to have, but are not necessary for the site to work; that’s pretty much the definition of graceful degradation.

Making it easy to choose column layout

Not all pages on this site have a multi-column layout. I wanted an easy way to specify from the WordPress backend how each post or page should appear. Using the Advanced Custom Fields plugin, I created a True/False field type. Then, in the single.php and page.php files, we check to see if that option is flagged “true.” If so, we insert the .article-columns class. Example:

<?php $columns = get_field('columns'); ?>
<?php if ($columns) { ?>
 <div class="article-columns">
 <?php the_content(); ?>
 </div>
 <?php } else { ?>
 <?php the_content(); ?>
<?php } ?>

Get a Trackback link

  1. Hillery, September 15, 2015:

    Awesome! I love the new look and I love that you wrote up a little blog post about it that’s even easy for us CSS newbs to follow. (:


Leave a comment