Bert Bos & Eva Kasal | CSS3 in Style en fr


Two ways to use the columns property:

Actual column width may be larger, if the element width is not an exact multiple of the columns

Multi-column – gap & rule

From the demo:

P.a {
  column-gap: 3em;
  column-rule: 1em solid red }
P.b {
  column-gap: 1em;
  column-rule: 2em solid lightgreen }

The column rule is centered in the gap and doesn't increase the gap!

Multi-column – unbalanced

If the element has a fixed height, columns can be filled in two ways:

Multi-column – span

From the demo:


<P>Lorem ipsum dolor...
<P>Nulla sagittis, odi...
<P>Lorem ipsum dolor...
<P>Nulla sagittis, odi...


body {columns: 18em}
h2 {column-span: all}

Numeric column spans expected in level 4

Multi-column – breaks, widows & orphans

H2 {page-break-after: avoid}

(break-after: avoid is equivalent, but not yet widely supported)

div {
  widows: 1;
  orphans: 1 }

Note that default is 2

Multi-column – status

On other/older browsers, try columnizer (requires JavaScript)