Как сделать что бы при уменьшении разрешения, блоки становились друг под другом, а не выравнивались по самой большой высоте?

Question

[Никита]

Добрый день!
Есть сайт ar-metal.ru/assortment.html на вкладке "Доборные элементы" нужно что бы при уменьшении разрешения блоки становились друг под друга, а не выравнивались по высоте самого высокого. Как это сделать? Так же приложил скрины, что бы было понятнее)

Answer 1

[Арсений Матыцин]

Технология древняя, как массоны)
https://masonry.desandro.com/

Имеет, правда, некоторые изъяны. Например желательно запускать после загрузки изображений, так как постройку может произвести без их учета. Но это тонкости.

Answer 2

[pashted]

не совсем то, но я бы сделал так:

.card-roof {
        height: 100%;
}
#pills-contact > .row > [class^=col] {
    padding-bottom: 20px;
}

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

Comments

[Никита]

а как тогда поступить, переверстать?)

[pashted]

Никита, возможно, я погорячился насчет "не получится". вот тут есть реализация этого
https://getuikit.com/assets/uikit/tests/grid-mason... , поверх flex, но с использованием js, в общем, это другой css-фреймворк. если есть время и желание, конечно, можно переверстать)

вот ссылка на доки https://getuikit.com/docs/grid#masonry