Как построить такую(фото внутри) сетку на grid css?

Question

[fgehte]

Посмотрите на код опытным взглядом, и посоветуйте где и как можно улучшить, а что вообще является лишним.
Верстаю от мобильной версии к десктопной.
- Мобилка
- Планшет
- Десктоп
Вот моя попытка разметить на гридах, мне кажется можно сделать проще, вот только опыта и знаний не хватает.

Comments

[Степан Крапивин]

много кода. Выложи на codepen/jsfiddle

Answer 1

[Евгений]

Приветствую.
Если я не ошибаюсь то в гридах как и во флексах есть order поманипулируй в первую очередь тут.
Исходя из вышесказанного сразу оговорюсь на гридах не верстаю, хотя опыт у меня большой, я люблю новые технологии тут считаю гриды оверхед. Попробую по сути твоей задачи. Готовое решение, сорян не предоставлю просто нет времени. Что вижу сразу раскладка реализуема через граммотно построенный layot через flex мобильная flex order column сердечко под фото posa > posr c order. Как и в остальных версиях там манипуляция flex-flow: row, order, и так далее. Если сложно и есть завтык, берешь пустое полотно и делаешь с нуля, не в текущем проекте, а просто в пустом.
Еще как решение, когда дизайнер перемудрил, а не все дизайнеры знают что css is awesome, стараюсь с ним связаться и найти компромисс.
В целом задача выполнима.

Comments

[fgehte]

Спасибо за комментарий! На флексах для меня эта задача выполняется легче, т.к. опыта с ними больше, что нельзя сказть про гриды, исходя из этого хотел переделать на гриды, чтобы больше понять эту технологию