Creating Columns with CSS3 and Fallback for Older Browsers

By Zedric Myers | Published December 8, 2014 | Categories: Web Development

There is a simple way to create columns using CSS3. It also saves several lines of CSS and more streamlined overall. After you’ve set up your HTML structure, you can simply add the column properties to the CSS selector of choice. These options currently work in IE 10.0, Chrome 4.0+, Firefox 2.0+, Safari 3.1+, and Opera 15.0+.

CSS3 Column Options:

column-count: Divides same name classes that are specified into columns.

.column-list {
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}

column-gap: Specifies spacing between columns. Can also be percentage for responsive sites.

.column-list {
-webkit-column-gap: 15px; /* Chrome, Safari, Opera */
-moz-column-gap: 15px; /* Firefox */
column-gap: 15px;
}

column-rule: Specifies width, style and color between columns.

.column-list {
-webkit-column-rule: 2px outset #999; /* Chrome, Safari, Opera */
-moz-column-rule: 2px outset #999; /* Firefox */
column-rule: 2px outset #999;
}

Other advanced properties, but not supported by all browsers:

column-fill and column-span

Fallback for older browsers:

There are several jQuery options for choosing. Easy List Splitter is fast and easy choice to use.

Just add the jQuery plugin to your site header and then add this simple call to your script calls. Customize to your needs.
$('.column-list').easyListSplitter({ colNumber: 4 , direction: 'horizontal'});

You can check out the plugin and more documentation here: Easy List Splitter.