Какие параметры задавать для модульной сетки в Figma?
Добрый день!Суть вопроса в названии.
Проблема в непонимании параметров.
Есть определенные параметры для 12 колоночной сетки.
Вариант 1.
Контейнер должен быть 1170 пикселей,но при этом он уже ВКЛЮЧАЕТ отступы по 15 пикселей(чтобы контент не лип к экрану),и в итоге ширина контентной части равна 1140 пикселей.
Вариант 2.
Контейнер контентной части 1170 пикселей,плюс падинги по 15 пикселей и итоге 1200 пикселей контейнер.
Вопрос верстальщикам?Какой вариант правильный???Искала информацию,перерыла кучу всего,но так и не определилась с ответом,ибо в разных источниках пишут оба варианта,расценивая как правильные.
Дальше,
при варианте 2 все в figme понятно ,при задаче параметров для сетки 1170 я ставлю:колонки 12,ширина колонки 70,ширина межколон. 30,итого получается контейнер 1170,и добавляю вторую сетку :2 колонки ,ширина межкол.1170,размер колон.15(для падингов).И у меня получается контейнер 1200 пикселей.
Но при варианте 1 контейнер 1140 сделать невозможно,в силу математики,ибо при выставлении параметров 12 колонок ,ширина межколон.30,ширина колонки 65 ,получается контейнер 1110 пикселей.
Чтобы получить контейнер 1140,нужно делать ширину колонки 67,5,а так не выставишь.
Делаю вторую сетку с 2 колонками по 15 пикселей,и растоянием между ними 1110 пикселей,и получаю 1140.Но тогда как же стандарт 1170???
Я что-то недопонимаю?Что?
Корректным является вариант под номером 2.
Суть в том, что при верстке в bootstrap по умолчанию в css свойствах прописано «box-sizing: border-box». Это свойство - «Применяется для изменения алгоритма расчета ширины и высоты элемента. Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.»
К примеру у нас есть блок с width: 600px, padding: 20px и еще (обводка) border: 2px в итоге ширина этого блока пересчитается и станет 644px, а со свойством box-sizing: border-box она останется 600px, но при этом внутренний контент будет подстраиваться с увеличением padding'a например.
Собственно в чем заключается решение? Учесть то что общий контейнер будет 1200px (1170px – контент + 15px отступы справа и слева.
Я так понимаю Вы имеете ввиду под общим контейнером 1200 пикселей фрейм/артборд ?И при этом опять же правильно 1170 пикселей внутренний контейнер ,и уже в нем у нас контент 1140 и 15 пикселей отступы по краям?Вы же это имеете ввиду?
Соответственно это стандарт.
Но!Проблема в том что я не могу сделать эти параметры в Фигме.
Я делаю контейнер 1140 ,допустим с типом сетки stretch,как ниже правильно написал Евгений,но отступы по 15 пикселей дополнительной сеткой я уже сделать не могу.Как вариант их учитывает разработчик?
Либо я дополнительно делаю такую вот сетку?Но нужна ли она?
И колонки неравные 67/68 при задаче использовании типа сетки stretch
Да ,можно поставить auto ширину колонок и получить контейнер 1140,причем ширину фрейма берем любую и расчитываем стандартно margin.Например берем 1440 -1140 (наш контейнер) получаем 300/2=150.Но при этом как сделать внутренние отступы по 15 пикселей.
Вообще со всей данной проблемой столкнулась исключительно на Фигме.
До этого,работая с Фотошопом,пользовалась уже готовыми сетками,поэтому и проблем не возникало. При установке параметров сетки в Фигме невозможно выставить отступы(margin) при фиксированном расстоянии колонок.,что в общем то логично.
Если же я делаю фикс 12 68 30 ,то контейнер получается 1146!
А если мы делаем ширину колонки без фикса,как вы написали,то наши колонки получаются разной ширины
КАК???
Я же не могу выставить значение 67,5.Что это за косяк у бутстрапа ???С неравными колонками???
Отказаться в данном случае от 4px сетки. Ибо по сути горизонтальный ритм формирует уже имеющася колоночная сетка. А 4px может быть полезной разве что для вертикального ритма (отступов по вертикали), но в таком случае можно просто создать дополнительную сетку row - height: 4px, gutter: 4px, type: top, count: auto, как на скрине https://www.dropbox.com/s/1iuy7kwy9fg15vs/Screensh... а горизотальные отступы формировать по принципу – кратные 4px.
Вот, отступы (gutter) ставишь 15, остально '1440 -1140 (наш контейнер) получаем 300/2=150' правильно и получается так, как ты хочешь, либо я что-то не догнал.
Простой
Простой
