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

Question

[Имя Фамилия]

Добрый вечер, обучаюсь верстке сайтов. Беру различные макеты и пытаюсь "оживить" их. И вот уже не в первый раз сталкиваюсь с подобной сеткой. Все это выглядит очень красиво, и я хотел бы научится создавать подобное. Но вот никак не могу понять, как это делать?
Может кто-нибудь в общем объяснить, или указать путь, а дальше попытаюсь разобраться?
Заранее благодарю за ответы

Answer 1

[opanova]

Эта сетка предназначена для того, чтобы построить композицию "по науке". Фактически, для верстальщика бесполезна. Всю лишнюю паутинку убирайте и оставляйте вертикальные направляющие для основных смысловых блоков. Потом по логике макета сориентируетесь :)

Answer 2

[Антон Р.]

Ох уж эти бредовые дизайнерские сетки. когда дизайнер не уверен в себе и своей работе он начинает "оправдывать" макет какими-то выдуманными якобы правильными сетками.

Comments

[Rustam Bainazarov]

Если вы убёрете горизонтальные направляющие, то увидите, что сетка тут абсолютно обычная.

Да и макет в целом вполне нормальный. Все зоны четко разделяются на блоки, внутри которых живут элементы. Даже наложения нет.

[Антон Р.]

Рустам Байназаров, а диагонали зачем все эти идиотские?

[Rustam Bainazarov]

Антон Р., это направляющие, которые формируют колонки и так называемый ритм. Просто тут они визуально показаны. Я думаю, эти скриншоты взяты из разряда показать, как происходил процесс. А в самом макете их нет.

[Имя Фамилия]

Рустам Байназаров, Увы, но если бы их не было. Такой вопрос я бы не задал)

[Rustam Bainazarov]

Илья отсутствует, на тогда можно пробовать SVG на фон с абсолютным позиционированием, у SVG должен быть атрибут preserveAspectRatio="none". Если это не проканает и линии будут искажать толщину или будет сложно состыковать с краями самой сетки, то тогда только JS поможет в сочетании с SVG или canvas.

Теоретически это можно решить так. Дальше не смогу подсказать, ибо лень пробовать и искать точное решение.

[Brad9aga]

Рустам Байназаров, можно попробывать сразу слать на х*р заказчика да и делов ))0 дешевле выйдет

Answer 3

[Виктор]

Ничего себе паутинка))) А чем плоха старая сетка колонками 12, 16 и т.д)) Очень странно что сделали такую сетку при таком слабеньком макете. На первом скрине видно, что правая часть 50% и левая столько же. И у правого и левого блока есть падинги отделяющие их. Я бы сделал флексами или гридами если не важна поддержка старыми браузерами. И каждый вложенный блок во флекс-контейнере по 50%, внутри каждого из блоков также можно использовать флексы. Если любите сетку то используйте какую-нибудь css-библиотеку с сеткой (их сейчас целая куча)

Comments

[Антон Р.]

Потому что это макет для полиграфии а дизайнер решил выпендриться

Answer 4

[LNV]

Просто убери эту сетку...