CSS Master

Figure 4.19. column-width: 8em and column-number: 3 in a 355px container

Thisgoesoutofthewindowentirely,though,ifwesettheheightofacolumn

container.Settingafixedheightonacontainerforcesthebrowsertocreateadditional

columnstoaccommodatethecontainer’scontent.Inthiscase,thecolumn-number

propertywillbeignored.

Spacing Columns with column-gap and column-rule

Howmanycolumnswillfitinacontaineralsodependsonthevalueofcolumn-gap.

Knownasthegutterinprintdesign,thecolumngapsetsthedistancebetweeneach

column.Theinitialvalueofcolumn-gapisnormal.Inmostbrowsers,that’sabout

1em.

Increasingordecreasingitswidthhasnoeffectonthewidthofeachcolumn,just

thespaceinbetween.Ifanelementis45emwidewithcolumn-width: 15emand

column-gap: normalapplied,thecontentwillbedividedintotwocolumnsrather

thanthree,ascanbeseeninFigure4.20.

154 CSS Master