Bert Bos | CSS tutorial – columns
columns
Two ways to use columns
:
Give the number of columns: columns: 3
Give the desired column width: columns: 20em
The real width may be more, if the element's width isn't a multiple of the column width.
column-gap
From the demo:
P.a { column-gap: 3em; column-rule: 1em solid red } P.b { column-gap: 1em; column-rule: 2em solid lightgreen }
The rule is centered in the gap and does not increase the gap!
If an element has a fixed height, columns can be filled in two ways:
column-fill: balance
column-fill: auto
In both cases it is possible that there is too much text. In
that case, extra columns are added on the right side, outside the
element's box. Whether they are visible depends on the value of
overflow
.
From the demo:
HTML:
<H2>Column-span:none</H2> <P>Lorem ipsum dolor... <P>Nulla sagittis, odi... <H2>Column-span:all</H2> <P>Lorem ipsum dolor... <P>Nulla sagittis, odi...
CSS:
body {columns: 18em} h2 {column-span: all}
Numbers (column-span:3
) may come in CSS
level 4
H2 {page-break-after: avoid}
(break-after
is the new name for
page-break-after
, but not yet supported everywhere)
div { widows: 1; orphans: 1 }
De normal value for both is 2
column-span
break-*
For older browsers you can try columnizer (if the user has JavaScript turned on)
And if the element is narrower than the desired width of one column, there will be only one column and it will be the narrower than what 'columns' specified.