automaticke sloupce podle poctu polozek

by Petr Haluza

HTML

<div class="filter-item">
        <div class="filter-item-title"><h3>Barva</h3></div>
        <div class="filter-item-content" data-item-count="16"><!-- zapsat pocet polozek -->
          <ul class="box-checkbox">
            <li class="check-box"><input id="check1" name="check1" type="checkbox"><label for="check1">Černá <span>(4)</span></label></li>
            <li class="check-box"><input id="check2" name="check2" type="checkbox"><label for="check2">Stříbná <span>(4)</span></label></li>
            <li class="check-box"><input id="check3" name="check3" type="checkbox"><label for="check3">Bílá <span>(4)</span></label></li>
            <li class="check-box"><input id="check4" name="check4" type="checkbox"><label for="check4">Modrá <span>(4)</span></label></li>
            <li class="check-box"><input id="check5" name="check5" type="checkbox"><label for="check5">Zelená <span>(4)</span></label></li>
            <li class="check-box"><input id="check6" name="check6" type="checkbox"><label for="check6">Hnědá <span>(4)</span></label></li>
            <li class="check-box"><input id="check1" name="check1" type="checkbox"><label for="check1">Černá <span>(4)</span></label></li>
            <li class="check-box"><input id="check2" name="check2" type="checkbox"><label for="check2">Stříbná <span>(4)</span></label></li>
            <li class="check-box"><input id="check3" name="check3" type="checkbox"><label for="check3">Bílá <span>(4)</span></label></li>
            <li class="check-box"><input id="check4" name="check4" type="checkbox"><label for="check4">Modrá <span>(4)</span></label></li>
            <li class="check-box"><input id="check5" name="check5" type="checkbox"><label for="check5">Zelená <span>(4)</span></label></li>
            <li class="check-box"><input id="check6" name="check6" type="checkbox"><label for="check6">Hnědá <span>(4)</span></label></li>
            <li class="check-box"><input id="check1" name="check1" type="checkbox"><label for="check1">Černá...

CSS

.filter-item-content {column-count:3;}
.check-box {border:1px solid #aaa;}
div[data-item-count="10"],
div[data-item-count="9"],
div[data-item-count="8"],
div[data-item-count="7"],
div[data-item-count="6"],
div[data-item-count="5"] {column-count:2;}
div[data-item-count="4"],
div[data-item-count="3"],
div[data-item-count="2"],
div[data-item-count="1"] {column-count:1;}