Как правильно реализовать такое распределение дивов?

Question

[coderisimo]

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

Пробовал использовать flex-direction - column, но , как в этом случае сделать так чтобы , когда место в контейнере по вертикали заканчивается оставшиеся дивы размещались в новом столбце рядом, см картинку? У меня получается один столбец, который (сво!) никак не реагирует на размеры контейнера.

Спасибо.

Answer 1

[bk_maestro]

Используй display: grid; прочитай про его свойства по типу grid-template-columns, grid-template-rows, grid-template-area и т.д. Узнаешь все, что тебя интересует.

Answer 2

[Andrej Sharapov]

задайте column-count под нужные медиа запросы

Answer 3

[Мария Коробкоголовых]

flex-wrap: wrap; не пробовал?

демка

Или я неправильно поняла суть твоей задачи

Comments

[coderisimo]

Как раз так как в демке уже работает, а мне нужно, как на картинках ). т.е чтобы сохранялась последовательность в столбцах.