Какие параметры задавать для модульной сетки в 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???
Я что-то недопонимаю?Что?
  • Вопрос задан
  • 21451 просмотр
Решения вопроса 1
VladislavTM
@VladislavTM
UI/UX designer
Корректным является вариант под номером 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 отступы справа и слева.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
На самом деле первый вариант можно поставить, но указывать надо stretch. В данном cлучае специально создал ширину фрейма 1170:5b75d6fa3de5e240709829.png
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы