Чем делать такую разметку?

Question

[Егор Живагин]

Заранее извиняюсь, знаю, что таких вопросов по 3 штуки в день приходит на тостер, помню их, а вот найти в поиске не могу.
Задача на картинке ниже. На узких разрешениях все блоки становятся одинаковыми квадратиками и занимают всё пространство блока. Bootstrap 3.

Думал сделать 4 колонки, но из-за разного кол-ва блоков в колонках будут проблемы с адаптивностью. Flex сюда тоже так себе подходит. CSS-Grid не предлагать ;)

Answer 1

[Сергей Горячев]

Думал сделать 4 колонки

Как раз 4 колонки тут и будут идеальным решением.

но из-за разного кол-ва блоков в колонках будут проблемы с адаптивностью

Не понятно, какие могут быть проблемы.

Flex сюда тоже так себе подходит

И флекс сюда подходит нормально. 4 колонки, внутри колонок flex-direction и всё встанет отлично.

CSS-Grid не предлагать ;)

Вот тут согласен, пока рановато его использовать.

https://jsfiddle.net/webirus/c0ktt24m/
В принципе, если высота известна, проблем вообще нет.
Если не известна, пару строк на JS, которые будут равнять блоки.
Ничего особенного нет.
Перестроение также легко делать через дополнительные классы в стиле bootstrap.
Аля column-xs, column-ls и так далее.

Comments

[Егор Живагин]

А проблемы такие -

На узких разрешениях все блоки становятся одинаковыми квадратиками и занимают всё пространство блока

. И в случае с колонками получится, что в первой колонке 4 элемента, а во второй 1 и куча пустого места под ним.

Про флексы - да, так, конечно, можно. Я имел ввиду использовать флексы вместо колонок.

[Егор Живагин]

Писал до фиддла) Спасибо

Answer 2

[Руслан Полин]

masonry только на js видимо.)

Comments

[Егор Живагин]

Да как-то не верится, что только на JS ) Но за подсказку спасибо, совсем забыл о ней

[Руслан Полин]

Егор Живагин: да, скорее не только на js. Просто немного не понял задачи - надо внимательнее читать.