@leuvarden
front-end novice

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

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

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

Я делала так (ссылка на codepen), но как-то некрасиво получается.
  • Вопрос задан
  • 2261 просмотр
Решения вопроса 2
dpr
@dpr
frontend developer
Держите codepen.io/delphinpro/pen/BWJEgG
Простая линейная структура. В определенных пределах можно менять положение плиток, не меняя css код.
Если еще помозговать, можно расширить эти пределы, добавить другие размеры плиток. Но на это нужно время, которого у меня нет.
Ответ написан
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
4 контейнера (2 строки, 1 строка, 2 строки, 1 строка) и на флексах.
Просто иначе перестроение будет не очень корректным. Указывать ширину лучше в % или vh/vw.
Либо использовать jquery библиотека masonry, их много, выбирайте какая нравится.
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
@strangeprojects
Flexbox' ом довольно просто. Даже не используя column. Конечно, придется поиграться с flex-grow, flex-basis, wrap/no-wrap и flex-контейнерами внутри flex-элементов.fa53e61c775440f9aac0f948b1f87d27.PNG
Ответ написан
iiiBird
@iiiBird
Пока ты спишь - твой конкурент совершенствуется
так как на скрине ты даже флексом не сможешь их нормально расположить. только абсолютом. так что либо юзай masonry, либо делай на ее основе свой плагин
Ответ написан
bugo_aneo
@bugo_aneo
Верстальщик по жизни, йог, буддист, кофеман
Покурите еще и этот вариант
codepen.io/emelyanova/pen/bqrwmE
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
17 янв. 2019, в 05:58
700 руб./в час
16 янв. 2019, в 22:45
1000 руб./за проект