Как сделать такую сетку на flex?

Question

[Даниил Постнов]

Всем привет!
Подскажите, как сделать такую сетку на flex? (без дополнительных оберток)



Извиняюсь за откровенные изображения, но что поделаешь :-)
В данный момент 6 столбцов, в них элементы (девушки). Это не гибкая структура и верстка не останется версткой, она будет интегрироваться.

Comments

[tema_sun]

Можно.

[Andrew]

(без дополнительных оберток)

А код какой-то будет?
Первое что приходит в голову - 2 блока: левый, правый, в них еще 2. Причем тут флекс, скажете вы, ну таки я не понимаю.

[Даниил Постнов]

Andrew, спасибо за вариант!
По поводу кода, что тут показывать? ul и четыре li?
Я делаю так же как вы предложили, но "левый , правый" - обертки, хотелось бы обойтись без них.

[Andrew]

Даниил Постнов, Код: 4 дива, для каждого разная высота. (к примеру)
С фиксированной высотой для каждого блока играйтесь.
Но если понадобится больше/меньше текста в блоках или другое изменение, влияющее на высоту, будете страдать(менять и ровнять все блоки из-за 1).

Answer 1

[webfln]

Гуглится по запросу flexbox masonry:
Пример: w3bits.com/labs/flexbox-masonry/2

Из кроссбраузерного решения до сих пор живет: https://masonry.desandro.com/

Comments

[Даниил Постнов]

Спасибо :-)

Answer 2

[profesor08]

Два блока, левый и правый, накидай туда внутренних блоков сколько хочешь. Флекс тут не нужен.

Comments

[Даниил Постнов]

Вот тут я сделал 6 блоков и накидал, но вы ведь понимаете что это не очень гибкая структура, если оставить это версткой, да, это прокатит.

Answer 3

[Jumandjilos]

на flex даже не знаю, но посоветую использовать css grid, он именно для таких макетов и сделан

Answer 4

[kryamk]

Используя только css