The CSS multi-column layout extends the block layout mode to allow the easy definition of multiple columns of text. People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do.
Unfortunately this is impossible to do with CSS and HTML without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting. This limitation is solved by adding new CSS properties to extend the traditional block layout mode.
Using columns
Column count and width
Two CSS properties control whether and how many columns will appear: column-count and column-width.
The column-count property sets the number of columns to a particular number. E.g.,
Example 1
HTML
<div id="col">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
</p>
<p>
Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
CSS
#col {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
Result
Will display the content in two columns (if you're using a multi-column compliant browser):
The column-width property sets the minimum desired column width. If column-count is not also set, then the browser will automatically make as many columns as fit in the available width.
Example 2
HTML
<div id="wid"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div>
CSS
#wid {
-moz-column-width: 100px;
-webkit-column-width: 100px;
column-width: 100px;
}
Result
The exact details are described in the CSS3 specification.
In a multi-column block, content is automatically flowed from one column into the next as needed. All HTML, CSS and DOM functionality is supported within columns, as are editing and printing.
The columns shorthand
Most of the time, a Web designer will use one of the two CSS properties: column-count or column-width. As values for these properties do not overlap, it is often convenient to use the shorthand columns. E.g.
The CSS declaration column-width:12em can be replaced by:
Example 3
HTML
<div id="col_short"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div>
CSS
#col_short {
-moz-column-width: 12em;
-moz-columns: 12em;
-webkit-columns: 12em;
columns: 12em;
}
The CSS declaration column-count:4 can be replaced by:
Example 4
HTML
<div id="columns_4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div>
CSS
#columns_4 {
-moz-column-count: 4;
-moz-columns: 4;
-webkit-columns: 4;
columns: 4;
}
Result
The two CSS declarations column-width:8em and column-count:12 can be replaced by:
Example 5
HTML
<div id="columns_12"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div>
CSS
#columns_12 {
-moz-columns: 12 8em;
-webkit-columns: 12 8em;
columns: 12 8em;
}
Result
Height Balancing
The CSS3 Column specification requires that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal. Firefox does this.
However, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. Therefore, if the height is constrained, by setting the CSS height or max-height properties on a multi-column block, each column is allowed to grow to that height and no further before adding new column. This mode is also much more efficient for layout.
Column Gaps
There is a gap between columns. The recommended default is 1em. This size can be changed by applying the column-gap property to the multi-column block:
Example 6
HTML
<div id="column_gap"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div>
CSS
#column_gap {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
column-gap: 2em;
}
Result
Graceful Degradation
The column properties will just be ignored by non-columns-supporting browsers. Therefore it's relatively easy to create a layout that will display in a single column in those browsers and use multiple columns in supporting browsers.
Note that the newest versions of Firefox and Chrome support these properties unprefixed; to ensure backwards compatibility with older Firefox/Chrome versions however, each property should be written thrice: once with the -moz prefix, once with the -webkit prefix and once without prefix.
Conclusion
CSS3 columns are a layout primitive that will help Web developers make the best use of screen real estate. Imaginative developers may find many uses for them, especially with the automatic height balancing feature.