Как такое сверстать?

Question

[Perflex_er]

Скриншоты

Есть 4 размера экрана, проблема в размещении блоков(некоторыe меняются местами) и в том, чтобы как-то уменьшить отступ между маленькими и большими блоками. У каждого блока есть отдельный класс.

Вот как это выглядит сейчас:

Скриншот

Comments

[Danny Arty]

masonry и перерисовывать сетку по достижению брейкпоинтов

[Ankhena]

Либо css свойство columns либо библиотеки типа masonry, как сказали выше.

Answer 1

[Mizutsune]

Такую раскладку блоков можно сделать например с помощью библиотеки masonry или поискать аналоги.

Можно конечно и без библиотек сделать. Например вот статья в которой есть материал по этой теме.

Comments

[Perflex_er]

А есть варианты без библиотеки?

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

[Mizutsune]

Perflex_er, не понимаю чем не устраивают библиотеки, но да, можно и без библиотек реализовать. Можно даже без JS реализовать, силами одного только CSS, но придётся сделать немного больше телодвижений.

Вот например есть несколько вариантов.

Ну или что-то такое.

[Perflex_er]

Mizutsune, спасибо большое

[Perflex_er]

Я не знал, как сформулировать вопрос, спасибо всем,кто писал.
Мне еще помог вот этот гайд:https://youtu.be/-isQPqqnIBo