Elevating your design with CSS3 Multiple Columns

You’ve just created your first blog, or company website, and have a load of content intended for the viewers of the site. But wait, why should the content have to span across the entire div? Isn’t there a way you can break up the long paragraphs into smaller, more bit sized literary chunks. Now there is. With CSS columns, you are able to more easily control the way in which your content is laid out. It may seem a bit antiquated to emulate a strategy that is used with newspapers, but at its core, breaking your content down to fewer words per line will help your audience digest what it is you’re trying to feed them. They can read faster, absorb more and appreciate you for allowing them to do so.

Multiple Columns

To get started is really simple. Simply give the element you wish to split up a class or id. Once the proper elements have been labeled with class or id, you’ll want to add the property: –webkit-column-count: 2; (Google Chrome, Safari), –moz-column-count: 2; (Firefox), column-count: 2; . These properties set the number of columns your layout is divided into.

[code language="css"].twoColumn { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }[/code] Screen Shot 2015-03-09 at 10.20.30 PM  

Multi Column Lists

In addition to breaking up written content across multiple columns, it is great for lists too. In the past, lists took up a lot of vertical space, leaving a lot of awkward horizontal negative space. One could split up the list into multiple parts manually scaling and positioning them. But even that is vulnerable to being broken by the browser and not showing up properly.

Take it a Step Further

Add interest to your content by breaking up the column layouts to help separate articles or different pieces of content. This is easier to do than one might think. It takes a bit more planning in the beginning; but in order to achieve this is to delineate which elements are going to be two columns, and which will be three, or four columns. Once you decide, you’ll need to change the class or id on the different elements. Finally, in the CSS create a second class or id and apply the column count property as mentioned above and tweak the value of the property.

[code language="css"] .twoColumn { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .threeColumn { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } [/code] Screen Shot 2015-03-09 at 10.38.36 PM  


In addition to setting your content in different column arrangements, you are also able to fine-tune your columns’ specifics. Below are properties that will give you more control over styling your columns.

Column Width

If you’re looking for a more responsive layout and let the browser do some of the work deciding how many columns to generate, setting a column width will tell the browser that you don’t mind exactly how many columns you want, but each column has to be at a certain width.

[code language="css"] -webkit-column-width: 500px; -moz-column-width: 500px; column-width: 500px; [/code]

Column Gap

A Gap, gutter or whatever term you use, can be important to your content and give you control over adjusting the space between each column.

[code language="css"] -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; [/code]

Column Rule

If you wish to add a visual separator in the gap or gutter, this property will enable you to add a rule to appear between each column. Once placed, it can be styled in the same way you would style a border.

[code language="css"] -webkit-column-rule: 1px outset #000; -moz-column-rule: 1px outset #000; column-rule: 1px outset #000; [/code]

Column Span

If you’ve ever worked with tables in html, you will remember the colspan tag, which allowed you to span an article header across columns. This property works in much of the same way. However, currently Firefox does not support this.

[code language="css"] -webkit-column-span: 3; column-span: 3; [/code]

The Final Result

Feel free to fork and play around using your own content

[codepen_embed height="268" theme_id="0" slug_hash="ZYjeVp" default_tab="css" user="crazydylll69"]See the Pen ZYjeVp by Dylan Rueff (@crazydylll69) on CodePen.[/codepen_embed]

Content thanks to:



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>