The CSS3 multi-column layout

The CSS3 multi-column layout allows us to place long articles in short columns. This column approach helps  many users as sometimes they miss the track of reading with the long lines. And that's the main reason why newspapers are printed in columned layout. Also, in the world of large screen monitors most of the web layouts are stretched too long causing the reader more trouble. Here the multi-column layout is the best option to serve data to the users.

Properties of multi-column layout:

column-count: 3;
Number of columns to be displayed.

column-width: 8em;
Width of each column.

column-gap: 2em; 
The gap between each column.

column-fill: auto; 
Is used to indicate that columns are filled in a consecutive manner.

column-fill: balance;
Is used to indicate that content is equally divided between the number of columns defined.

column-span: all; 
Similar to the colspan in table layout. (This property is not supported in Firefox yet, but they will add the support soon.)

column-rule: 1px solid #ccc;
Sets border to the columns.

These properties can also be used separately -
column-rule-width: 1px
column-rule-style: solid
column-rule-color: #ccc

Shorthands:
The shorthand is mainly used for column-count and column-width properties:
columns: 3 20em; /* column-count column-width */

Browser Support:
Check the browsers who support these properties at - When Can I Use
And the old browsers who don't support multi-column layout they will happily ignore these properties.

Demo:



Note:
The multi-column layout module is still a candidate recommendation, but considering the implementation of these properties in major browsers it seems it will not take too long for W3C to approve it.

Related Articles:
- Essential CSS Pseudo Classes
- CSS Media Query min-width Vs min-device-width with meta viewport
- Grayscale images with CSS3 Filter Property
- CSS - Indenting Second Line of LI (List Items)