Как сделать кол-во колонок в зависимости от кол-ва элементов в контейнере?

Question

[godsplan]

Я хочу сделать что-то такое.
Понимаю, что можно через гриды, но не знаю как.
Важно чтобы элементы начали заполняться в первом столбике, и когда дошли до 6, переносились бы в другой столбец.

Answer 1

[godsplan]

display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(6, 1fr);

Answer 2

[Mark Lansky]

Родителю можно поставить флоу по вертикальной оси и добавить перенос элементов при переполнении. Чтобы переполнение возникало, нужно ограничить высоту родителя.

display: flex;
flex-direction: column;
max-height: 100px;
flex-wrap: wrap;

Comments

[godsplan]

Решение с ограничением высоты не выглядит привлекательным от слова совсем.

[Mark Lansky]

ну а как же вы тогда хотите определять те самые 6 элементов, после которых должен идти перенос? вам в любом случае придётся это где-то как-то хардкодить, динамически это невозможно сделать

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

[godsplan]

ZerdoX-x,

display: grid;
          grid-auto-flow: column;
          grid-template-rows: repeat(6, 1fr);

[Mark Lansky]

godsplane, хм, и правда. ваше решение выглядит гораздо чище. спасибо, что поделились решением!

пожалуй пойду подучу гриды что-ли