Как сверстать такую плиточную структуру на Flex?

Question

[Андрей Охотников]

Как сверстать вот такую структуру чтобы плитки располагались не на одной линии, а друг под другом?

Answer 1

[Владимир Проскурин]

Зачем флексы, если есть columns?

Comments

[Андрей Охотников]

Спасибо, это гениально! А как сделать чтобы блоки шли слева направо а не сверху вниз?

[Владимир Проскурин]

webdev341, а как вы сделаете это на флексах, учитывая то, что элементы располагаются слева направо (columns так тоже не умеет), и элементы имеют разную высоту?
Андрей Охотников, слева направо нельзя. Тут без JS насколько я знаю, не обойтись, т.к. это уже не сетка, элементы нужно как-то расположить слева направо с нормальным заполнением (чтобы вдруг первая колонка не была очень длинной). Есть либы https://masonry.desandro.com/ тут просто пример на js https://codepen.io/inorganik/pen/pREYPJ

[Владимир Проскурин]

webdev341, это опять сверху вниз, и три дива. Такое умеет column, только с одним дивом.