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

Question

[vasiliy-zutuf]

Делается ли на css, чтобы блоки отображались таким образом? Ширина например 33% или 50% с разной высотой, в зависимости от содержимого.

... Имелось ввиду можно ли сделать на css. На js понятное дело. flex, как я понимаю, будет выравнивать по строкам и делать отступы между более короткими блоками.

Answer 1

[HamSter]

1.isotope masonry grid
2. masonry
3. flex один из примеров

4. мой пример

Comments

[Сергей delphinpro]

а может примерчик запилите на флексах?
вряд ли :)

[HamSter]

Сергей: https://codepen.io/dudleystorey/pen/eAqzk?editors=1100 например

[HamSter]

https://codepen.io/nicetransition/pen/EPePJv?edito...

[Сергей delphinpro]

HamSter: Первый вариант - горизонтальный, не то.
Второй - тут от masonry только название. там и флекс-то совершенно не нужен. Тупо блоки разбиты на столбики.
Вы мне покажите настоящий пример вертикальных "кирпичиков" на флексах.

[Антон Мудренок]

Сергей: че вообще в вашем понимании вертикальные кирпичики? опишите кейс

[Сергей delphinpro]

Антон Мудренок:
ну это же очевидно. Разве нет?
линейная структура в html + flexbox (как заявляют) без js =

[Сергей delphinpro]

Это непростая задача. и оптимально она решается пока только скриптами.

[Сергей delphinpro]

Хотя я может фантазирую :) Ведь автор вопроса поставил задачу весьма неточно.
Его частный случай на картинке в принципе легко реализуется (без учета дополнительных неозвученных условий)
codepen.io/anon/pen/OXQJrE?editors=1100

[Антон Мудренок]

Сергей: пффф, ну естественно такое не делается флексбоксом. Но я лично вижу разницу между этим и тем, что автор привел

[Родион Мещеряков]

Сергей: На чистом css именно в таком порядке не получится