Расположение блоков css(js)?

Question

[Za Za]

как из этого

<ui class="colom2">
    <li class="product">1</li>
    <li class="product">2</li>
    <li class="product">3</li>
    <li class="product">4</li>
    <li class="product">6</li>
    <li class="product">6</li>
</ui>

сделать так


а не это


высота разная и не фикс у блоков + ко всему меняется по кликам
ща ввиде колонок - внешне идеально, но нужно чтоб информация располагалась по порядку друг за другом(слева на право), а не друг под дуругом

Comments

[Za Za]

Много Чего, так там тоже самое что на изображении 2м у меня
а мне нужно как на первом

[Za Za]

не совсем понимаю что вы спросили. блоки идут с инфой друг за другом (само собой это есть нумерация - если инфу местами поменять то каше получается)
кода делаешь сортировку блоков по данным (например ищешь товары с опред характеристиками и если на экране выведено больше 1 колонки => мозг пользователя сломаешь )))
поэтому и нужно сделать чтоб инфа шла друг за другом, а е друг под другом

Answer 1

[Антон Литвиненко]

https://masonry.desandro.com/

Comments

[Za Za]

работает но не так как нужно ))) при изменении информации внутри блока его габариты остаются прежними ((
и не совсем я понял как марджин добавить между блоками

Answer 2

[Владимир Юрченков]

В сторону flex посмотрите

Comments

[Антон Литвиненко]

флекс так не умеет. точнее вот достаточно костыльное решение, в прод такое нельзя все равно
https://codepen.io/tobiasahlin/pen/JVmLRa