Как сверстать макет с неравномерной сеткой?

Question

[Leuvarden]

Как лучше сверстать такой макет, используя flexbox?

Разбить на два контейнера по три строки, или можно как-то красиво решать, используя свойство flex-wrap?

Я делала так (ссылка на codepen), но как-то некрасиво получается.

Answer 1

[Сергей delphinpro]

Держите codepen.io/delphinpro/pen/BWJEgG
Простая линейная структура. В определенных пределах можно менять положение плиток, не меняя css код.
Если еще помозговать, можно расширить эти пределы, добавить другие размеры плиток. Но на это нужно время, которого у меня нет.

Answer 2

[Сергей Горячев]

4 контейнера (2 строки, 1 строка, 2 строки, 1 строка) и на флексах.
Просто иначе перестроение будет не очень корректным. Указывать ширину лучше в % или vh/vw.
Либо использовать jquery библиотека masonry, их много, выбирайте какая нравится.

Answer 3

[Dartess]

Рай для гридов х) и так то есть полифил... кхм...

Answer 4

[strangeprojects]

Flexbox' ом довольно просто. Даже не используя column. Конечно, придется поиграться с flex-grow, flex-basis, wrap/no-wrap и flex-контейнерами внутри flex-элементов.

Answer 5

[iBird Rose]

так как на скрине ты даже флексом не сможешь их нормально расположить. только абсолютом. так что либо юзай masonry, либо делай на ее основе свой плагин

Answer 6

[Максим Тимофеев]

А не проще взять что-то готовое?
типа:
isotope.metafizzy.co/layout.html

Answer 7

[Полина Емельянова]

Покурите еще и этот вариант
codepen.io/emelyanova/pen/bqrwmE