CSS Master

<li>Mangoes</li>

</ul>

</div>

AndtheaccompanyingCSS:

.columned-list {

float:left;

width: 33%;

min-width: 150px;

margin: 0;

}

.clearfix::after {

clear:both;

content: ' ';

display: block;

}

Whilethisapproachworks,itrequiresmoremarkupthanasingle-listelement.

We’reusingthreelielementsinsteadofone.Andwehavetomanagefloatedele-

mentsandclearingthosefloats.Withamultiple-columnlayout,wecanuseasingle

elementwithoutworryingaboutclearingfloats:

<ul style="columns: 3">

<li>Apples</li>

<li>Oranges</li>

<li>Bananas</li>

<li>Dragon fruit</li>

<li>Cherries</li>

<li>Strawberries</li>

<li>Blueberries</li>

<li>Raspberries</li>

<li>Durian</li>

<li>Mangosteen</li>

<li>Mangoes</li>

</ul>

Blink- and WebKit-based Browsers

Blink-andWebKit-basedbrowsersremovebulletsandnumbersfromsomeorall

listitemsinamulticolumnlayout.Asaworkaround,addaleftmargin(orright

168 CSS Master