Имеется список, пункты которого должны следовать друг за другом по вертикали, а по достижении нижней границы родителя с фиксированной высотой - переноситься в новую колонку.
Реализация с помощью column-count
располагает пункты списка друг за другом по вертикали, но список разделен на три столбца с одинаковым количеством пунктов, а нужно чтобы первые столбцы были заполнены по высоте на все 100%.
.category-list {
list-style: none;
column-count: 3;
height: 100px;
border: 1px solid red;
}
.category-list li {
page-break-inside: avoid;
break-inside: avoid;
}
<ul class="category-list clearfix">
<li class="category-item">1</li>
<li class="category-item">2</li>
<li class="category-item">3</li>
<li class="category-item">4</li>
<li class="category-item">5</li>
<li class="category-item">6</li>
<li class="category-item">7</li>
<li class="category-item">8</li>
<li class="category-item">9</li>
<li class="category-item">10</li>
<li class="category-item">11</li>
<li class="category-item">12</li>
</ul>