Withthem,wecancreateadaptivecolumnsandgrid-basedlayoutswithoutthe
needforextrawrappingdivelementsorexpensiveDOMmanipulations.
Using CSS Multicolumn Layout
Multiple-column(multicolumn)layoutallowstextandelementstoflowfromone
columntoanother,andautomaticallyadjusttothewidthoftheviewportorcontain-
er.Withit,wecancreatetextlayoutsthatmimicthosefoundinnewspapers,
magazines,andebooks.Wecanalsouseittocreatespace-efficientuserinterfaces.
Althoughthespecificationismature,thestateofbrowsersupportisso-so.Basic
supportformultiple-columnlayoutisquitegood.Allmajorbrowserssupportthe
abilitytocreatecolumns(columnsproperty),setanoptimalcolumnwidth(column-
width),setthesizeofthegutter(column-gap),andaddrulesbetweencolumns
(column-rule).
Chrome ≤ 45 / Opera ≤ 30 and Firefox ≤ 41 do require vendor prefixes: -webkit-
and-moz-respectively.Todate,ChromeandOperalacksupportforcolumn-fill
(or-webkit-column-fill)whileFirefoxlackssupportforcolumn-span(or-moz-
column-span).NeitherInternetExplorer10+norSafari9+requirevendorprefixes.
Supportforbreak-before,break-after,andbreak-inside,ontheotherhand,is
lessrobust.Thesepropertiesspecifyhowthechildrenofamulticolumnelement
shouldbedistributedacrosscolumnsorpages.InternetExplorersupportsthese
properties,whileFirefoxdoesnot.Safari,Chrome,andOperacurrentlysupportthe
non-standard-webkit-column-break-before,-webkit-column-break-after,and
-webkit-column-break-insidepropertiesinstead.Table4.2detailsthelevelof
browsersupportformulticolumnlayout.
Complex Layouts 147