CSS Multiple Columns
Published:
While reading long lines of text on a wider screens it is easy to lose track of which line you were on.
The CSS Multi-column module offers a technique for long chunks of text to wrap to multiple columns,
which is widely popular in editorial design of magazines and newspapers.
W3C Specification:
CSS Multi-column Layout Module
Implementation
To apply multiple columns to a particular element, block container of text,
we specify either the width of a column column-width: <length unit>
(the exact number of columns will depend on the avaliable space),
or the number of columns column-count: <integer>
.
element {
column-width: <length unit> | auto; // or
column-count: <integer> | auto;
}
Column gaps and rules
The example below describe gaps and rules between columns.
element {
column-gap: <length unit> | normal;
column-rule-color: <color>;
column-rule-style: <border-style>;
column-rule-width: <border-width>;
/* shorthand property */
column-rule: <color> <border-style> <border-width>;
}
Column breaks
We can control column breaks,
that is how the content displays within each column, using properties break-before,
break-after
or break-inside
.
Normally we do not want widows and orphans
left dangling at the top or bottom of a column, separated from the rest of the paragraph.
Column span
You can also use the 'column-span' property, which make the child element (spanning element) span the whole set of columns, when the property is set to: all.
element {
/* none: The element does not span multiple columns. */
/* all: The element spans across all columns. */
column-span: none | all;
}
Filling columns
Content within columns is balanced by default, column-fill: balance
,
or can be filled with content sequentially, column-fill: auto
,
and some columns may end up partially filled, or with no content at all.
Browser support
In terms of browser support, multiple columns are pretty much supported in every major browser, except in Internet Explorer 9 and lower, but they degrade well into single column, which is not bad at all.
But as far as I've tested, only few browsers
support properties besides column-width
or column-count
,
which gives us little to no control over breaks and columns fills and no chance to span element across columns in other browsers.
- Supported by:
-
- Firefox 2+
- Chrome 4+
- Safari 3.1+
- Opera 11.1+
- Internet Explorer 10+
Multiple columns in web pages
Contrary to my believes I found only few websites that are somehow using multiple columns.