CSS3 Multi Column Generator

CSS3 Multi Column

This is the content for your CSS3 multi column which can split into many different column according to your needs. Multi columns has been used for news, magazines and online journals.

With CSS3 multiple columns, you can create table like column just like column section that you see in newspapers and books. It’s properties of are column-count, column-gap, column-fill, column-rule-color, column-rule-style, column-rule-width, column-span, column-width and column-rule. Column-gap property are the space between each columns. Column-rule are the width, style and color for each column. Column-count is the number column you desired for your content. It is supported by the latest IE 10, Chrome 4+, Firefox 2+, Safari 3.1+ and Opera 15+. Below are the configurations with many options for your multi column needs. Play around with it and share with your fellow developers.

Font Color:

Column Count:

Column Gap:

Font size:

Border size:


<div class="multi-column"> This is a sample CSS3 multi column sentence as a place holder for the actual paragraph or content………… </div>

Generated CSS:

Supporting Browsers

At the time of writing the following browsers support the CSS3 Multi Column property:

Browser Supports multi column?
Firefox 2+ (-moz-) Full Support
Firefox 1 No
Safari 3.1+ (-webkit-) Full Support
Safari 3.1+ Partial Support
Chrome 4+ (-webkit-) Full Support
Chrome 1 No
IE 10+ -ms- Full Support
Opera 11+ Full Support