Как сверстать такую сетку?

Question

[kamisarlapsha]

Привет! Возник вопрос, как сверстать такую сетку из блоков ? Flexbox ? Заранее спасибо!

Comments

[Omnipresent]

Решили воспроизвести Мондриана на чистом HTML/CSS?))

Answer 1

[UndineS]

гриды (display: grid и свойства для описания гридов) позволяют задать такое.

С помощью гридов можно на уровне родительского блока указать стандартную ширину/высоту ячейки сетки (как в долях от экрана, так и в пикселях, в процентах, чередуя различные варианты), а уже у конкретного блока указывать границы его начала/окончания по вертикали и по горизонтали, основываясь на сетке, описанной в родительском блоке (например, указать, что первый блок по высоте идет от линии 1 до линии 3, а по ширине - от линии 1 до линии 2 и т.п.). Можно даже в описании родительского блока указать, какие ячейки должны занимать потомки, указывая их класс (пример тут: https://developer.mozilla.org/en-US/docs/Web/CSS/C... )

Подробнее о гридах на русском языке тут: https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Answer 2

[Alfieros]

Напишите свой вариант решения и вас поправят/направят.