Если страница выглядит «как-то не так», но непонятно почему — скорее всего, дело в сетке. Или в её отсутствии. Сетка — это невидимая структура, которая держит всё на месте: текст, кнопки, картинки, блоки. Без неё дизайн превращается в хаос, где каждый элемент сам по себе.
Разберём, как устроены сетки, какие бывают, и как правильно работать с отступами.
Зачем вообще нужна сетка
Человеческий глаз любит порядок. Когда элементы выровнены по одной системе — страница воспринимается легче, взгляд скользит плавно, информация усваивается быстрее. Это не эстетика ради эстетики, а физиология восприятия.
Практически сетка решает три задачи:
Согласованность. Все страницы сайта выглядят как единое целое, а не набор случайных экранов.
Масштабируемость. Когда макет строится по правилам, добавить новый блок или раздел — не проблема. Всё встаёт на место само.
Коммуникация. Дизайнер и разработчик говорят на одном языке: «отступ 24px», «колонка 3 из 12» — и оба понимают, что имеется в виду.
Колоночная сетка: основа основ
Самая распространённая система — колоночная. Страница делится на равные вертикальные полосы с промежутками между ними.
Классика — 12 колонок. Почему 12? Потому что делится на 1, 2, 3, 4, 6 и 12 — это максимальная гибкость. Хочешь три равных блока — берёшь по 4 колонки. Хочешь боковую панель и контент — берёшь 4 и 8. Хочешь пополам — по 6.
Для мобильных устройств обычно используют 4 колонки. На планшетах — 8. Это не жёсткое правило, но такое разбиение встречается чаще всего и хорошо работает.
Структура колоночной сетки состоит из трёх элементов:
- Колонки (columns) — сами вертикальные полосы, в которые помещается контент
- Промежутки между колонками (gutters) — расстояние между соседними колонками
- Поля (margins) — отступы от края экрана до первой и последней колонки
Типичные значения для десктопа с шириной 1440px: 12 колонок, gutter 24px, margin 80–120px с каждой стороны. Контент при этом занимает центральную часть шириной около 1200px.
Для мобильного с шириной 375px: 4 колонки, gutter 16px, margin 16–20px.
Базовая линия и вертикальный ритм
Колонки управляют горизонталью. Но есть ещё вертикаль — и здесь в игру входит базовая линия (baseline grid).
Идея простая: все текстовые элементы выровнены по невидимым горизонтальным линиям, расположенным через равные промежутки. Чаще всего шаг — 4px или 8px.
Когда весь текст «сидит» на этих линиях — страница выглядит собранной. Когда нет — что-то неуловимо раздражает, но понять что сложно.
На практике это значит: если у вас body text с line-height 24px — это кратно 8. Отступ между заголовком и абзацем — 16px или 24px, тоже кратно 8. Высота кнопки — 40px или 48px.
Такая система называется 8-point grid и сегодня это фактический стандарт в продуктовом дизайне. Google Material Design, Apple Human Interface Guidelines, Figma — все работают на её основе.
8px-сетка отступов
Отступы — это не просто «сколько места оставить». Это иерархия. Большой отступ между секциями говорит: «это разные темы». Маленький отступ внутри карточки говорит: «это части одного целого».
Система на основе 8px выглядит так:
- 4px — минимальный отступ, обычно внутри компонента (например, между иконкой и текстом)
- 8px — небольшой отступ между тесно связанными элементами
- 16px — стандартный внутренний padding карточек и блоков
- 24px — отступ между карточками или элементами в списке
- 32px — разделение между логическими группами внутри секции
- 48–64px — расстояние между секциями на мобильном
- 80–120px — расстояние между крупными секциями на десктопе
Если все ваши отступы — числа из этого ряда (или кратные 4), вы уже на 90% там, где надо.
Часто встречают ситуацию: дизайнер ставит отступ 22px, потом 18px, потом 27px. В каждом отдельном случае «на глаз» норм, но в целом страница выглядит разболтанно. Причина именно в этом — нет системы.
Как работать с сеткой в Figma
В Figma сетка настраивается через Layout Grid на фрейме. Несколько советов:
Используй несколько сеток одновременно. Можно добавить колоночную сетку и поверх неё — горизонтальную базовую с шагом 8px. Тогда видишь и горизонталь, и вертикаль.
Называй компоненты с учётом сетки. «Button/Primary/48h» — сразу понятно, что высота 48px, то есть она ложится в 8-point grid.
Snap to grid. Включи привязку к сетке — тогда элементы будут «прилипать» к ближайшей точке, и случайных 22px не получится.
Auto layout — твой друг. Когда компоненты строятся через Auto Layout с зафиксированными gap и padding, они автоматически соблюдают систему. Ручное перетаскивание на пиксель-в-пиксель — прошлый век.
Адаптивность: как сетка ведёт себя на разных экранах
Сайт смотрят с экранов разной ширины, и сетка должна это учитывать. Есть два подхода:
Fluid grid — колонки тянутся вместе с экраном. Ширина колонки в процентах, gutter фиксированный или тоже процентный. Контент равномерно заполняет пространство.
Fixed breakpoints — на определённых ширинах экрана сетка переключается. Например: до 768px — 4 колонки, 768–1024px — 8 колонок, 1024px и выше — 12 колонок.
На практике обычно комбинируют: колонки fluid внутри диапазона, но на брейкпоинтах меняется их количество.
Стандартные брейкпоинты, которые используют большинство фреймворков:
- 320–375px — маленький мобильный
- 390–430px — современный мобильный
- 768px — планшет портретный
- 1024px — планшет альбомный
- 1280px — небольшой десктоп
- 1440px — стандартный десктоп
- 1920px — широкий экран
Не обязательно делать отдельный макет для каждого. Обычно достаточно трёх: мобильный, планшет, десктоп.
Типичные ошибки
Игнорировать поля на мобильном. Контент «в край» — это больно для глаз и пальцев. Минимум 16px с каждой стороны, лучше 20px.
Разные отступы в похожих местах. Если между карточками в одном месте 24px, а в другом 20px — пользователь не поймёт почему, но что-то пойдёт не так.
Забыть про gutter при вёрстке. Дизайнер нарисовал с gutter 24px, разработчик поставил gap 16px. Итог — сетка сломана, хотя колонки на месте.
Слишком много колонок на мобильном. 12-колоночная сетка на экране 375px — это колонки шириной около 20px. Туда ничего не влезет. На мобильном нужно либо 4 колонки, либо вообще отказаться от сетки в пользу одноколоночного layout.
Текст на всю ширину на широких экранах. Строка в 1200px — это 150-200 символов. Читать невозможно. Максимальная комфортная длина строки — 65-75 символов, это примерно 600-700px для типичного размера шрифта. Поэтому контентные зоны (статьи, описания) ограничивают по ширине, даже если сетка шире.
Сетка — это не клетка
Главное заблуждение про сетки: «это ограничение, которое мешает творчеству». На самом деле наоборот — сетка освобождает. Когда базовые правила понятны, не нужно каждый раз заново решать, куда поставить элемент. Энергия уходит на содержание, а не на пиксельный хаос.
При этом намеренное нарушение сетки — тоже инструмент. Элемент, который выходит за пределы колонок, сразу бросается в глаза. Именно поэтому большие hero-картинки часто делают во всю ширину экрана, выходя за стандартные поля. Это работает именно потому, что всё остальное в сетке.
Если хотите поэкспериментировать — попробуйте asymmetric grid: неравное количество колонок по обе стороны от центра. Например, 5+7 вместо 6+6. Создаёт динамику без потери структуры.
Как это работает в реальных проектах
Когда в REEXY берут проект — будь то лендинг от 3 500 ₽ или полноценный корпоративный сайт от 15 000 ₽ — сетка определяется на этапе макета, до того как написана хоть одна строчка кода. Это экономит время на правках и убирает ситуацию «что-то не то, но непонятно что».
Практический чеклист перед стартом макета:
- Определи целевые устройства и их ширины
- Выбери количество колонок для каждого брейкпоинта
- Зафикси gutter и margin
- Настрой базовую 8px-сетку
- Задай типографическую шкалу, кратную 4 или 8
- Опиши систему отступов: какие значения используются и когда
Звучит как много работы на старте. Но это те несколько часов, которые потом экономят дни.
Ресурсы, которые стоит изучить
Grid by Example — сайт Рэйчел Эндрю с интерактивными примерами CSS Grid. Лучший практический ресурс по теме.
Refactoring UI — книга Адама Ватана и Стива Шогера. Половина книги — про то, как работают отступы и пространство в UI.
Material Design guidelines — документация Google. Раздел про Layout и Spacing написан очень подробно и с примерами.
Figma Community — там есть готовые файлы с настроенными сетками под разные форматы. Можно взять как основу и адаптировать под проект.
Сетка — один из тех инструментов, которые незаметны, когда работают правильно. Их замечают только когда что-то идёт не так. Хороший знак, что вы всё сделали верно — когда дизайн «просто выглядит хорошо» и никто не может объяснить почему.