Подскажите, как вывести древовидные списки в колонки?

[danneo]

Есть категории с вложенностью с 3-4 уровнем. Нужно это как-то вывести так, чтобы кол-во в двух столбиках было одинаково (с учетом вложенных, т.к. их разное кол-во).

 

[ultra]

пример бы или макет

 

[danneo]

пример бы или макет

что-то типа этого Для просмотра ссылки Войди или Зарегистрируйся
выводится длинный список справа, а слева пустое место получается. Списки могут меняться, добавляться, поэтому нужно динамически как-то, чтобы были максимально заполнены все пустоты. Как вариант (придумал сейчас), выводить сначала главный раздел, а затем на столбики делить, получится вообще без пустот. Можно как-то в колонки не слева направо, а сверху вниз, а потом вправо (без float и inline-block)?

 

[ultra]

честно говоря, я все еще не понимаю, как, зачем и что вообще происходит
подобные списки обычно выводятся в одну колонку
если речь идет о множестве нод, то используется что то вроде tree.js
если все же колонки то Для просмотра ссылки Войди или Зарегистрируйся

в целом, я прочитал все три раза, не особо вник, но подсознательно мне кажется, что это конфликт возможностей css, адекватности реализации и хотелок

а, понял в чем конфликт, колонки и вложенные списки плохо сочетаются

 

[Didi]

Я похоже понял что вам нужно, тут 2 варианта подхода:

1) если так как на вашем примере: "Для просмотра ссылки Войди или Зарегистрируйся" заголовок левого столбика и "Для просмотра ссылки Войди или Зарегистрируйся" заголовок правого,
и так должно быть в обязательном порядке - тогда увы.. У вас нет возможности чтоб количество категорий в списках было одинаково.

2) Если необязательно как в вашем примере, то можно это решить так:
идет первый заголовок' к примеру "Для просмотра ссылки Войди или Зарегистрируйся" и под ним все его категории колонками, можно "inline-block" или "Flex".
Заканчиваем с "Для просмотра ссылки Войди или Зарегистрируйся", пошел второй заголовок "Для просмотра ссылки Войди или Зарегистрируйся" и под ним как и под первым его категории колонками.