Модульные сетки в UI-дизайне: колонки, отступы, поля
Основы3 минРедакция Innovialabs
Коротко
Модульная сетка — это невидимая разметка из колонок, межколонных отступов и полей, по которой выравниваются все элементы; она делает макеты единообразными, а их перенос в код — предсказуемым.
Коротко: что такое сетка
Модульная сетка — это набор невидимых направляющих, по которым дизайнер размещает элементы интерфейса. Она задаёт, где начинается и заканчивается контент, какой ширины могут быть блоки и какие между ними расстояния.
Без сетки каждый экран собирается «на глаз», и через месяц в проекте десяток разных отступов. С сеткой решения принимаются один раз, а дальше элементы просто встают на свои места.
Из чего состоит колоночная сетка
- Колонки (columns) — вертикальные полосы, на которые делится ширина контента. Блок может занимать одну колонку или несколько.
- Межколонные отступы (gutters) — промежутки между колонками. В них не кладут контент, они дают «воздух».
- Поля (margins) — расстояние от края экрана до первой и последней колонки.
Ширина контейнера складывается так: колонки + гаттеры между ними + поля по краям. Колонки обычно гибкие и растягиваются, а гаттеры и поля фиксированы.
Три вида сеток, которые используются вместе
| Сетка | Что задаёт | Зачем нужна |
|---|---|---|
| Колоночная | Горизонтальное расположение и ширину блоков | Выравнивание по вертикальным линиям, адаптивность |
| Базовая (baseline) | Вертикальный ритм текста — шаг, на который ложатся строки | Ровные строки и одинаковые интервалы между абзацами |
| 8pt-сетка | Все размеры и отступы кратны 8 (иногда 4 для мелочей) | Единая система расстояний без случайных чисел |
Почему именно 8
Число 8 легко делится на 2 и 4, а распространённые размеры экранов хорошо делятся на 8. Значения 8, 16, 24, 32, 48, 64 визуально различимы и дают понятную шкалу. Для мелких деталей — иконок, отступов внутри кнопок — допускают шаг 4.
Главная польза не в магии числа, а в ограничении выбора: дизайнер выбирает из короткой шкалы, а не из любого числа от 1 до 100, и разработчику не нужно гадать, было там 13 или 15.
Типовые настройки
Это не стандарт, а распространённые стартовые точки. Например, адаптивная сетка Material Design тоже использует 4, 8 и 12 колонок для разных ширин экрана.
| Устройство | Колонки | Гаттер | Поля |
|---|---|---|---|
| Телефон | 4 | 16 | 16–24 |
| Планшет | 8 | 16–24 | 24–32 |
| Десктоп | 12 | 24–32 | автоматически, контент ограничен максимальной шириной |
Почему 12 колонок популярны на десктопе: 12 делится на 2, 3, 4 и 6, поэтому легко собрать раскладки в две, три, четыре или шесть карточек в ряд.
Как сетка помогает разработке
Сетка в макете напрямую переводится в CSS. Разработчику не нужно измерять каждый отступ: достаточно знать число колонок, гаттер и поля для каждого брейкпоинта.
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 0 16px;
max-width: 1280px;
margin: 0 auto;
}
@media (min-width: 768px) {
.container { grid-template-columns: repeat(8, 1fr); gap: 24px; padding: 0 32px; }
}
@media (min-width: 1200px) {
.container { grid-template-columns: repeat(12, 1fr); }
}
Если в дизайне используется 8pt-система, её удобно оформить переменными или токенами (--space-1: 8px, --space-2: 16px и так далее) — тогда макет и код говорят на одном языке.
Как настроить сетку в Figma
- Выделите фрейм и в правой панели добавьте Layout grid.
- Выберите тип Columns, задайте число колонок, Gutter и Margin, тип Stretch.
- Добавьте вторую сетку типа Rows или Grid с шагом 4 или 8 для вертикального ритма.
- Сохраните настройку как стиль, чтобы применять её ко всем экранам одного размера.
Частые ошибки
- Класть текст и картинки в гаттеры.
- Делать сетку «для галочки» и не выравнивать по ней элементы.
- Использовать разные сетки на экранах одного размера.
- Ломать 8pt-шкалу случайными значениями вроде 13 или 22.
- Забывать про мобильную сетку и пытаться ужать десктопную.