Figure 4.16. When the container is 355px wide, we only have room for one column at 15emSettingthecolumn-numberproperty,ontheotherhand,definestheoptimalnumber
ofcolumnstocreate.Itsvaluemustbeanintegergreaterthan 0 .Ifcolumn-width
issomethingotherthanauto,thebrowserwillcreatecolumnsofthatwidthupto
thenumberofcolumnsspecifiedbycolumn-number.Ifcolumn-width: auto,the
browserwillcreatethenumberofcolumnsspecifiedbycolumn-number.That’sa
bittrickytounderstand,solet’sillustratewithsomescreenshots.
Inthefiguresthatfollow,ourcontainerhasacolumn-numbervalueof 3 ,anda
column-widthvalueofauto.Whetherourcontaineris 760 pixelswide(asinFig-
ure4.17)or 355 pixelswide(asinFigure4.18),westillhavethreecolumns.
Complex Layouts 151