Designing with CSS – Multiple Columns

You may have multi-column layouts using CSS3 which allows content to flow into multiple columns with a gap and a rule between them.

There are ten properties to extend the current CSS box model, out of which I have used three in the examples in this article. These properties allow you to have multiple columns, in two ways: by defining a width for each column, or by defining a number of columns. To create a space between the columns, you need to specify a width for gaps, and may even insert rules.

CSS3 Generator

If you are not very comfortable with CSS, or would like to have CSS codes auto-generated for you to save time, here is a useful and handy tool called CSS3 Generator. This simple tool created by Randy Jensen could be used for most basic design elements like rounder corners, box-shadow, text-shadow, etc on your webpages. It will create some cross-browser CSS3 code based on whatever values you want.

In the previous article I illustrated generation of code for text shadow using text-shadow property of CSS3 with the help of this tool.

In this article I shall illustrate generation of code for multiple columns using column-count, column-width, column-gap and column-rule properties of CSS3 with the help of this tool. The procedure is simple. You chose your design element from the drop-down menu, enter your values, and get your auto-generated code for your project.

You enter the number of columns you want to create within the box, and the column gap in between columns. The code will be generated.

Your Code:

-moz-column-count:2;
-moz-column-gap:10px;
-webkit-column-count:2;
-webkit-column-gap:10px;
column-count:2;
column-gap:10px; 

Browser Compatibility:

Firefox 3.0+ Chrome 4.0+ Safari 3.1+

Example of Box with Multiple Columns

This example uses the CSS3 column-count property and currently it will not work in all browsers. Alternatively, you may also use the CSS3 column-width property to create multiple columns. I am giving you the code for CSS3 column-width property as well.

You set gaps and rules between two adjacent columns using the CSS3 column-gap and column-rule properties. The values of the column-rule property are similar to those of the CSS border properties. Like border, column-rule is a shorthand property.

CSS Code:

.box {color:#807970;background:#f9fafa;border:1px solid #dbe1e6}
.corner {border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px}
.twocolumns-count {column-count:2;column-gap:10px;-moz-column-count:2;-moz-column-gap:10px;-webkit-column-count:2;-webkit-column-gap:10px}
.twocolumns-width {column-width:300px;column-gap:10px;-moz-column-width:300px;-moz-column-gap:10px;-webkit-column-width:300px;-webkit-column-gap:10px;}

HTML:

<div class="box corner twocolumns-count">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>

Example without Rule:

CSS Code:

.box {color:#807970;background:#f9fafa;border:1px solid #dbe1e6}
.corner {border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px}
.twocolumns-rule {column-count:2;column-gap:10px;column-rule:1px solid #dbe1e6;-moz-column-count:2;-moz-column-gap:10px;-moz-column-rule:1px solid #dbe1e6;-webkit-column-count:2;-webkit-column-gap:10px;-webkit-column-rule:1px solid #dbe1e6}

HTML:

<div class="box corner twocolumns-rule">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>

Example with Rule: