Добрый вечер, обучаюсь верстке сайтов. Беру различные макеты и пытаюсь "оживить" их. И вот уже не в первый раз сталкиваюсь с подобной сеткой. Все это выглядит очень красиво, и я хотел бы научится создавать подобное. Но вот никак не могу понять, как это делать?
Может кто-нибудь в общем объяснить, или указать путь, а дальше попытаюсь разобраться?
Заранее благодарю за ответы
Эта сетка предназначена для того, чтобы построить композицию "по науке". Фактически, для верстальщика бесполезна. Всю лишнюю паутинку убирайте и оставляйте вертикальные направляющие для основных смысловых блоков. Потом по логике макета сориентируетесь :)
Ох уж эти бредовые дизайнерские сетки. когда дизайнер не уверен в себе и своей работе он начинает "оправдывать" макет какими-то выдуманными якобы правильными сетками.
Антон Р., это направляющие, которые формируют колонки и так называемый ритм. Просто тут они визуально показаны. Я думаю, эти скриншоты взяты из разряда показать, как происходил процесс. А в самом макете их нет.
Илья отсутствует, на тогда можно пробовать SVG на фон с абсолютным позиционированием, у SVG должен быть атрибут preserveAspectRatio="none". Если это не проканает и линии будут искажать толщину или будет сложно состыковать с краями самой сетки, то тогда только JS поможет в сочетании с SVG или canvas.
Теоретически это можно решить так. Дальше не смогу подсказать, ибо лень пробовать и искать точное решение.
Ничего себе паутинка))) А чем плоха старая сетка колонками 12, 16 и т.д)) Очень странно что сделали такую сетку при таком слабеньком макете. На первом скрине видно, что правая часть 50% и левая столько же. И у правого и левого блока есть падинги отделяющие их. Я бы сделал флексами или гридами если не важна поддержка старыми браузерами. И каждый вложенный блок во флекс-контейнере по 50%, внутри каждого из блоков также можно использовать флексы. Если любите сетку то используйте какую-нибудь css-библиотеку с сеткой (их сейчас целая куча)
Простой
