Как сделать чтобы ul разбивался на колонки правильно?

Question

[Роман Говоров]

Есть список, разбит на 3 колонки следующим кодом:

ul{
    width: 100%;
    top: 63px;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-rule: 1px solid lightgray;
    -moz-column-rule: 1px solid lightgray;
    column-rule: 1px solid lightgray;
}

На выходе получаю следующее:


У меня в первой колонке 9 элементов, во второй 8 и в третей 8
Как сделать так чтобы было 9 9 7?

Answer 1

[Анатолий]

С этим разбиением на колонки лучше не связываться. Flex бери или даже CSS Grid, если IE11 и ниже поддержка не нужна. Так у тебя будет практически полный контроль над построением таких вещей.
Даже если задать высоту, марджины первого элемента первой колонки и первых элементов других колонок работают по-разному, отсюда и проблема.

Comments

[Александр Присяжнюк]

Плюсую, такая сложная колоночная вёрстка нужна только в весьма специфичных случаях. Например: вёрстка сайта газеты по реальному прототипу и тому подобное, но уж никак не для списка из ссылок.