Чтобы выбрать и настроить дизайн сетку, начните с типа контента и поведения интерфейса: колонная сетка задаёт каркас и адаптивность, модульная сетка фиксирует ритм блоков и отступов, а сетка базовой линии typography синхронизирует строки и вертикальные интервалы. Дальше выставьте margin/gutter/шаг и проверьте на реальном контенте в ключевых брейкпоинтах.
Сводка решений для быстрой проверки
- Если интерфейс резиновый и живёт на брейкпоинтах - начинайте с колонной сетки дизайн, затем подгоняйте модуль.
- Если много карточек/плитки/каталога - берите модульная сетка дизайн как главный ритм (модуль = базовая единица отступов и размеров).
- Если в продукте много текста и важна типографика - включайте сетка базовой линии typography и привязывайте вертикальные отступы к line-height.
- Если контент непредсказуемый (UGC, длинные заголовки) - увеличьте допустимые диапазоны: margin и gutter, а модуль оставьте стабильным.
- Если команда спорит о "красоте" - формализуйте правила: 1-2 сетки на продукт, токены отступов кратны модулю, проверка на 3 экранах.
Когда нужна модульная сетка: преимущества и сценарии
- Цель: получить предсказуемый ритм размеров и отступов между блоками.
- Действие: задайте модуль (например, 8px или 4px) и требуйте кратность ему у spacing-токенов.
- Критерий успеха: отступы и размеры элементов складываются без "случайных" значений, компоненты легче масштабируются между экранами.
Подходит, когда: карточные интерфейсы, дашборды, маркетинговые блоки, дизайн-система, быстрый рост продукта и команды.
Лучше не усложнять модулем, когда: одна посадочная страница с уникальной арт-дирекшен-типографикой, или когда вы сознательно делаете "ломаный" ритм и готовы поддерживать это вручную.
Колонная сетка: правила построения и распространённые ошибки
Что понадобится:
- Файл макета и библиотека стилей (spacing/typography токены), чтобы дизайн сетка была не "в голове", а в правилах.
- Список брейкпоинтов (минимум mobile и desktop; желательно ещё tablet), иначе колонная сетка не проверяется.
- Доступ к настройкам layout grid в редакторе (например, чтобы настроить сетку в Figma для фреймов и компонентов).
- Пара реальных экранов с "плохим" контентом: длинные заголовки, разные цены, теги, ошибки валидации.
Частые ошибки, которые ломают колонный каркас:
- Колонки есть, а правила выравнивания нет: часть блоков привязана к колонкам, часть - к краю контейнера.
- Гаттер меняют произвольно между экранами: ритм разваливается, особенно в списках и таблицах.
- Делают слишком много колонок "на всякий случай": растёт вариативность, падает консистентность.
- Не фиксируют контейнер: непонятно, что считать margin, а что "пустым пространством".
| Задача | Рекомендуемая сетка | Пример настроек Desktop | Пример настроек Mobile | Что проверить |
|---|---|---|---|---|
| Контентный сайт, много текста | Колонная + базовая линия | 12 колонок, margin 80px, gutter 24px; line-height 24px (1.5rem при 16px) | 4 колонки, margin 16px, gutter 16px; line-height 24px | Абзацы, списки, подписи под картинками, вертикальные интервалы |
| Каталог/карточки/плитка | Колонная + модульная | 12 колонок, margin 64px, gutter 24px; модуль 8px | 4 колонки, margin 16px, gutter 16px; модуль 8px | Кратность модулю, переносы заголовков в карточках, равные высоты |
| Дашборд, сложные панели | Колонная (жёсткий каркас) + модульная | 12 колонок, margin 48-64px, gutter 16-24px; модуль 4/8px | 4 колонки, margin 16px, gutter 12-16px | Сетки внутри панелей, выравнивание чисел/иконок, плотность |
Базовая линия и её влияние на читаемость и иерархию
Подготовка перед шагами (быстрый чек):
- Зафиксируйте базовый размер шрифта (обычно 16px = 1rem) и целевой line-height для основного текста.
- Выберите модуль вертикального ритма (часто равен line-height или его делителю: 24px или 8px).
- Определите 2-3 уровня текста (body, heading, caption) и их line-height.
- Решите, где допускаются исключения (например, большие заголовки могут выходить из сетки, но только в hero-блоках).
-
Задайте базовую линию от основного текста. Выберите body-текст (например, 16px) и line-height, который станет вертикальной единицей (например, 24px = 1.5rem). Критерий: абзацы и списки "ложатся" в один ритм без ручных правок.
- Практика: держите вертикальные отступы кратными 24px или 8px (если 24px делите на 3).
-
Привяжите интервалы между текстовыми блоками к ритму. Настройте margin-top/bottom у заголовков и абзацев так, чтобы сумма line-height + отступы оставалась кратной базовой линии. Критерий: между разными параграфами нет "дрожания" вертикали.
- Пример: после заголовка H2 оставляйте 24px или 32px (4×8px), а не 30px.
-
Согласуйте размеры заголовков через line-height, а не через случайные отступы. У заголовков часто другой font-size, поэтому важнее выровнять их line-height к ближайшему кратному ритму (например, 32/40/48px). Критерий: заголовки не "съедают" сетку вокруг.
- Если заголовок 32px, попробуйте line-height 40px (2.5rem) вместо 36px.
- Проверьте сетку на реальном контенте и крайних случаях. Подставьте длинные заголовки, ссылки в две строки, списки, подписи и ошибки форм. Критерий: вертикальные зазоры остаются кратными ритму, текст не "плывёт" от экрана к экрану.
- Зафиксируйте правило в дизайне-системе. Опишите, что все vertical spacing токены кратны модулю, а типографика привязана к базовой линии. Критерий: новый экран собирается без подбора значений "на глаз".
Выбор сетки по типу контента и продуктовой задаче
- Колонная сетка задана для каждого брейкпоинта, и основные контейнеры ей следуют.
- Модуль выбран (4/8px) и все отступы в компонентах ему кратны, без "11px" и "19px".
- Текстовые стили согласованы по line-height; вертикальные отступы кратны ритму (это и есть рабочая сетка базовой линии typography).
- Карточки, таблицы и формы выравниваются по одним и тем же направляющим, а не каждый блок по-своему.
- Есть правило для исключений: где допускается выход из сетки и кто это утверждает.
- Проверены минимум 3 сценария: пустое состояние, "переполненный" контент, состояние ошибки.
- Компоненты масштабируются: при смене ширины колонок не появляется каскад ручных правок.
- Внутренние сетки (в карточках/панелях) не конфликтуют с внешней: кратность модуля сохраняется.
Параметры настройки: шаг модуля, gutter, margin и соотношения
- Случайные значения модуля: если модуль 10px, сложнее поддерживать типографику и кратность. Держите модуль 4px или 8px и фиксируйте это в токенах.
- Гаттер слишком маленький для плотных экранов: визуально склеиваются карточки и колонки. Увеличьте gutter или добавьте внутренние padding, но сохраните кратность модулю.
- Margin не совпадает с контейнером: элементы то "прилипают" к краям, то уходят внутрь. Определите container width/constraints и делайте margin его частью.
- Смешивание процентов и пикселей без правила: например, контейнер в %, а gutter в px без проверки на узких ширинах. Решение: фиксируйте container max-width и проверяйте минимальную ширину колонки.
- Слишком много колонок на mobile: усложняет выравнивание и не даёт выигрыша. На телефоне чаще достаточно 4 колонок (или 2 для простых лендингов).
- Непоследовательные внутренние сетки: внутри карточки другие отступы, чем в системе. Привяжите внутренние padding к тому же модулю (например, 16/24/32px).
- Типографика вне ритма: line-height не кратен вертикальному модулю, из-за чего "ломаются" интервалы. Сначала нормализуйте line-height, потом подбирайте spacing.
- Отсутствие правил для медиа: изображения, иконки, аватары часто имеют "неудобные" размеры. Заранее задайте кратные модулю размеры (например, 24/32/40/48px).
Практические тесты: адаптивность, согласованность и производительность
Альтернативы и упрощения, когда они уместны:
- Только колонная сетка без базовой линии. Подходит для UI с короткими текстами (кнопки, метки, значения), где типографический ритм не доминирует. Условие: spacing-токены всё равно кратны модулю.
- Только модульная сетка без жёстких колонок. Уместно для небольших продуктов, где макет собирается из блоков по авто-лейауту, а ширины задаются ограничениями (min/max). Условие: есть понятный контейнер и правила для растяжения.
- Комбинация: внешний каркас колонками + внутренний модуль. Лучший дефолт для продуктовых интерфейсов: внешняя сетка отвечает за адаптивность, внутренняя - за ритм компонентов. Условие: модуль кратен gutter/margin или их делителю.
Короткие ответы на типичные практические сомнения
Можно ли использовать одну и ту же дизайн сетка для всех экранов продукта?
Да, если вы фиксируете правила для брейкпоинтов: на каждом экране меняются параметры (колонки/margin/gutter), но логика остаётся одной. Это снижает вариативность и ускоряет сборку новых экранов.
Как быстро понять, что нужна именно модульная сетка дизайн?
Если вы постоянно спорите об отступах и размерах, а компоненты "чуть-чуть разные" - это сигнал. Модуль (4/8px) превращает отступы в систему и уменьшает ручные подгонки.
Сколько колонок выбирать для колонная сетка дизайн: 12 или меньше?
12 - удобный универсальный вариант для desktop, потому что хорошо делится на 2/3/4/6. На mobile чаще достаточно 4: иначе вы усложняете правила без практической выгоды.
Зачем нужна сетка базовой линии typography, если есть auto layout и токены?
Auto layout управляет коробками, но не гарантирует стабильный вертикальный ритм строк. Базовая линия синхронизирует line-height и вертикальные отступы, поэтому страницы выглядят "собраннее", особенно в текстовых интерфейсах.
Как настроить сетку в Figma, чтобы она помогала, а не мешала?
Настраивайте grid на фреймах (для каркаса) и используйте токены/стили для внутренних отступов. Не пытайтесь "загридить" каждую мелочь: сетка должна задавать правила, а не превращаться в пиксель-арт.
Что делать, если дизайн-система уже есть, но сетки в ней нет?
Начните с инвентаризации spacing-токенов и приведите их к модулю. Затем добавьте колонный каркас для 2-3 брейкпоинтов и только после этого вводите базовую линию для типографики.
