Table 4.2. Browser support for multiple-column layout (source:
CanIUse.com^9 ).Internet Firefox Safari Chrome Opera Android
Explorer
2.1+ (partial;
requires
-webkit-
prefix)1 1.5+ (partial;
requires
-webkit-
prefix in
versions 15+)1+ (partial;
requires
-webkit-
prefix)9+ (versions <
9 have partial
support,
require
-webkit-
prefix; uses
non-standard
properties)2+ (partial;
requires
-moz- prefix)1 0+Despitethecurrentstateofsupport,it’ssafetousethesepropertiesinprojects.
Multicolumnlayoutisaprogressiveenhancement.Ifthebrowserdoesnotsupport
it,textwilldefaulttothenormalflow.Defining Column Number and Width Using columns
Tocreatemultiplecolumns,setthecolumnsproperty:<div style="columns: 2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ... </p>
<p>Duis aute irure dolor in reprehenderit in voluptate ... </p>
</div>Thecolumnspropertyisashorthandpropertyforcolumn-widthandcolumn-number.
Withcolumns,thefirstvaluethatcanbeinterpretedasalengthbecomesthevalue
ofcolumn-width.Thefirstvaluethatcanbeinterpretedasanintegerbecomesthe
valueofcolumn-number.Theorderinwhichyouspecifyeachvalueisofnocon-
sequence.Ashasbeenshown,there’snoneedtospecifyboth.Unspecifiedvalues
defaulttotheirinitialvaluesofauto.Allofthefollowingexamplesarevalidvalues
forcolumns:■ columns: 10em 3(Sameascolumn-width: 10em; column-number: 3)
■ columns: 3(Same as column-width: auto; column-number: 3)(^9) http://caniuse.com/#feat=multicolumn
148 CSS Master