Можно ли распределять блоки таким образом используя только CSS?

Question

[mishapsv]

Можно ли распределять блоки один за другим так, чтобы они сначала выстроились в несколько столбцов/строк и, если не помещаются, появляется вертикальный скролл.
При этом блоки (заголовок и пункты) должны идти плотно один под другим.

Answer 1

[Eugene Chefranov]

Можно. Изучайте Flex

Comments

[mishapsv]

Eugene Chefranov можно не так загадочно? я знаю флекс, но не вижу, как только им выполнить условие. Либо в строку и переносить, тогда строки буду одной высоты для всех карточек, либо в колонки, тогда будет скролл гор-ный.

[Eugene Chefranov]

mishapsv, так?

[mishapsv]

Eugene Chefranov ни(
сейчас у меня почти так и сделано, но нужно именно без оберток-колонок (<ul class="list">), только <li> один за другим, т.к. контент будет меняться, нельзя ручками распределить.

[Eugene Chefranov]

mishapsv, у вас идет всё одним сплошным списком?

[Eugene Chefranov]

mishapsv, обновил пример, сделал одним списком

[mishapsv]

Eugene Chefranov заголовок + пункты под ним - это условно карточка. И эти карточки должны идти одна за другой в разметке, нельзя, как в вашем примере, разделять обертками.

[Eugene Chefranov]

mishapsv, приведите пример вашей разметки, так тяжело представить что у вас там

[mishapsv]

Eugene Chefranov я в первом комменте вам писал

Либо в строку и переносить, тогда строки буду одной высоты для всех карточек

Получается вот так
https://codepen.io/mishapsv/pen/qMKmWP
а нужно:

должны идти плотно один под другим

[mishapsv]

Eugene Chefranov, ваша разметка отлично подходит.

[Eugene Chefranov]

mishapsv, тогда так

но будет нужна обертка вокруг всего списка

Answer 2

[eternalfire]

тут без js не разобраться - колонки разной высоты
советую masonry
https://masonry.desandro.com/

но возможно посмотреть в сторону этого
w3bits.com/labs/css-masonry

Comments

[mishapsv]

eternalfire это да, но была надежда, что я что-то не знаю и можно на цсс.