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

Question

[bearMinsk]

Добрый день!
Нарвался вот на такой так сказать макет в jpg т.к. не имею большого опыта попытался сверстать и ни как не получается. Подскажите как грамотно сверстать, именно проблема с десктопа в планшетный вариант(рыжий блок с ценами), да и вообще как разделить грамотно по блокам. Кажется что макет детский однако не получается с блоками этими отрицательные марджины кажется не вариант... Буду очень благодарен!

Answer 1

[Glorious Cat]

CSS Grid?

Comments

[bearMinsk]

Как вариант, однако может есть и другие способы?)

[Glorious Cat]

bearMinsk, как вариант сделать два баннера, один из которых скрывать в зависимости от разрешения экрана.
UPD: и делать всё с помощью flexbox.

[Glorious Cat]

Но как мне кажется гриды сюда идеально вписываются.

[bearMinsk]

Рустем Насыров, да, видимо нечего здесь мутить и делать гридами))))

[Талян]

bearMinsk, ну а что у вас с макетом нестандартного? Грид тут самый оптимальный вариант, а если уж очень хочется не гридом, то обычными дивами. Не вижу ничего необычного от слова совсем:

[bearMinsk]

Анатолий Цивилёв, такая разметка к десктопу не будет подходить ("события")

[Талян]

bearMinsk, а, не увидел что это один блок. Тогда grid. А чем он вас смущает?

[bearMinsk]

Анатолий Цивилёв, да нет... думал без гридов как-то можно....как раньше прадеды верстали=)

Answer 2

[bearMinsk]

В общем нашел решение!
Без гридов поможет только flex с отрицательными марджинами или Bricks.js

Answer 3

[Jimmy Tod]

Вот онлайн конструтктор фронта, попробуй повторить на нем devdesire.com, если получится выгрузишь готовую html