Как сверстать такой блок?

Question

[Роман]

Подскажите, как можно сверстать такой блок (нужно будет с адаптивом)?

Comments

[Ankhena]

Гридами.

Находите последовательность и через nth-child задаете размеры.

По аналогии с

Если последовательности не наблюдается, то расставляете классы и используете dense

Answer 1

[approximate solution]

Гриды

https://medium.com/@stasonmars/%D0%B2%D0%B5%CC%88%...

Comments

[Роман]

Не совсем понятно, как сделать в динамике. Это будет не статичная верстка страницы, а блоки (разделы каталога)

[approximate solution]

Роман Лазарев, В каком плане "в динамике"?)

[Роман]

approximate solution, добавил первый блок (синий квадрат), добавляю второй блок, первый становится зеленым, а этот встает на его место. См.рисунок в топике.

Условно, я задаю сетку и добавляю категории, и они смещаются/заполняются согласно сетки из рисунка топика.