Контакт

Сетка и шкала отступов: как расставлять расстояния на сайте

Шкала отступов на основе 4 px, карточка на глаз и по шкале, закон близости, сетка на 12, 8 и 4 колонки и ритм страницы — с живыми примерами.

Дизайн-системы Обновлено

Коротко

Шкала отступов — короткий набор расстояний от 4 до 96 px, из которого берутся все поля, отступы и промежутки сайта. Сетка — система колонок, промежутков и полей, по которой блоки встают на странице: обычно 12 колонок на десктопе, 8 на планшете и 4 на телефоне. Вместе они превращают вёрстку из череды догадок в несколько правил: маленькие расстояния внутри группы, большие — между группами, блоки — по колонкам. Страница выглядит спокойной и дорогой, элементы выравниваются между секциями, а новые страницы собираются быстрее, потому что никто не подбирает расстояния на глаз.

Шкала отступов: девять ступеней на основе 4 px

Каждая полоса — в настоящем размере. Мелкие ступени отличаются на 4 px, крупные растут быстрее — ровно так, как глаз замечает разницу.

  1. --space-1 4 px
  2. --space-2 8 px
  3. --space-3 12 px
  4. --space-4 16 px
  5. --space-5 24 px
  6. --space-6 32 px
  7. --space-7 48 px
  8. --space-8 64 px
  9. --space-9 96 px

Почему 4 и 8: эти числа хорошо делятся, попадают в целые пиксели на любом экране и совпадают с размерами большинства значков и шрифтов. Точная основа важна меньше, чем сам факт, что она есть, а у ступеней есть имена: дизайнер и разработчик говорят «space-5», а не «где-то 25 пикселей».

Карточка на глаз и по шкале

Одна и та же карточка. Справа подсвечены поля и промежутки — все они ступени одной шкалы.

На глаз: 7, 13, 19, 22 px

Дубовый стол

Массив дуба, масло с воском, 160 × 90 см

24 000В корзину
По шкале: 8, 16, 24 px

Дубовый стол

8

Массив дуба, масло с воском, 160 × 90 см

24
24 000В корзину

Отступы группируют: закон близости

Элементы, которые стоят ближе друг к другу, читаются как одна группа. Одинаковые отступы везде дают список без структуры.

Все отступы по 16 px

Доставка

По городу за 3 дня

Сборка

В день доставки

Гарантия

5 лет на каркас

4 px внутри, 32 px между

Доставка

По городу за 3 дня

Сборка

В день доставки

Гарантия

5 лет на каркас

Правило, которое работает везде: расстояние внутри группы меньше расстояния между группами — минимум вдвое. Заголовок ближе к своему тексту, чем к предыдущему блоку; подпись ближе к своему полю, чем к следующему.

Модульная сетка: 12, 8 и 4 колонки

Переключите экран: колонки показаны поверх макета, а блоки перестраиваются по сетке каждого размера.

Первый экран
Текст
Фото
1
2
3

колонка промежуток 24 px поле страницы

Двенадцать колонок делятся на половины, трети, четверти и шестые — поэтому они стандарт для десктопа. На планшете хватает восьми, на телефоне — четырёх: содержимое обычно занимает всю ширину, а сетка держит поля и выравнивание.

Словарь сетки

Семь слов, которых достаточно, чтобы договориться о сетке между дизайном и кодом.

ТерминЧто этоТипичное значение
Колонка вертикальная полоса, на которую встаёт содержимое 12 / 8 / 4
Промежуток расстояние между колонками 16–24 px
Поле расстояние от края экрана 16 px на телефоне, от 48 на десктопе
Предельная ширина до какой ширины растёт страница 1200–1440 px
Точка перелома ширина, на которой меняется сетка 768 и 1024 px
Охват сколько колонок занимает блок span 4, span 7, 1 / -1
Расстояние между секциями воздух между крупными блоками страницы 48 px на телефоне, 96 на десктопе

Ритм страницы: воздух между секциями

Большие расстояния между секциями и меньшие внутри них — главный рычаг дорогого вида.

Секция
96 px · --space-9
Секция
24 px
96 px · --space-9
Секция

Отступы и сетка в коде: 2 примера

Шкала как CSS-переменные и сетка, которая меняет число колонок вместе с экраном.

Шкала отступов

Имена — по ступеням, комментарии — по ролям: шкала читается с одного взгляда.

spacing.css 
/* Шкала отступов на основе 4px: любое поле, отступ и промежуток — одна из ступеней */
:root {
  --space-1: 0.25rem;  /* 4px  — значок и его подпись */
  --space-2: 0.5rem;   /* 8px  — внутри группы */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px — внутри карточки */
  --space-5: 1.5rem;   /* 24px — поля карточки, промежуток сетки */
  --space-6: 2rem;     /* 32px — между группами */
  --space-7: 3rem;     /* 48px — между секциями на телефоне */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px — между секциями на десктопе */
}

.card { padding: var(--space-5); display: grid; gap: var(--space-2); }
.section + .section { margin-top: var(--space-7); }
@media (min-width: 64em) { .section + .section { margin-top: var(--space-9); } }

Сетка

Одно правило меняет число колонок, промежуток и поля на каждой точке перелома.

grid.css 
/* Сетка: 4 колонки на телефоне, 8 на планшете и 12 на десктопе */
.page {
  --columns: 4;
  --gutter: var(--space-4);
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--space-4);
  max-width: 80rem;
  margin-inline: auto;
}
@media (min-width: 48em) { .page { --columns: 8; --gutter: var(--space-5); padding-inline: var(--space-6); } }
@media (min-width: 64em) { .page { --columns: 12; padding-inline: var(--space-7); } }

.hero { grid-column: 1 / -1; }
.text { grid-column: 1 / -1; }
@media (min-width: 64em) { .text { grid-column: span 7; } }

6 правил отступов и сетки

  1. 01

    Только ступени шкалы

    Расстояние, которого нет в шкале, — повод проверить макет.

  2. 02

    Внутри меньше, чем между

    Промежуток внутри группы — не больше половины промежутка между группами.

  3. 03

    gap вместо внешних отступов

    Расстояния задаёт родитель; дочерние элементы не расталкивают друг друга.

  4. 04

    Блоки — по колонкам

    Края текста, фото и карточек попадают на линии сетки.

  5. 05

    Воздух растёт с экраном

    48 px между секциями на телефоне, 96 на десктопе — пропорция сохраняется.

  6. 06

    Одни имена везде

    У шкалы в макете и в коде одинаковые имена ступеней.

Частые ошибки с отступами и сеткой

  1. Одинаковые отступы везде

    Страница теряет группы и читается как один длинный список.

  2. Расстояния вроде 13 и 17

    Близкие значения выглядят ошибкой и ломают выравнивание между блоками.

  3. Слишком мало воздуха

    Слипшиеся секции делают дешёвым даже хороший дизайн.

  4. Десктопная сетка на телефоне

    Двенадцать колонок на 375 px дают колонки уже одного слова.

  5. Схлопывающиеся отступы

    Вертикальные отступы соседей сливаются; gap у родителя ведёт себя предсказуемо.

  6. Сетка только в макете

    Если код её не повторяет, выравнивание исчезает при первой правке.

Вопросы об отступах и сетке

Что такое шкала отступов?

Короткий набор расстояний, из которого берутся все поля, отступы и промежутки сайта.

Основа 4 px или 8 px?

8 px проще; 4 px добавляет мелкие ступени для плотных интерфейсов. Работают обе, если команда их держится.

Сколько колонок нужно сайту?

Обычно 12 на десктопе, 8 на планшете и 4 на телефоне.

Что такое промежуток (gutter)?

Расстояние между колонками; в CSS его задают через column-gap.

Сколько воздуха между секциями?

Около 96 px на десктопе и 48 px на телефоне — и всегда больше, чем внутри секций.

Grid или flexbox?

Grid — для раскладки страницы и карточек, flexbox — для ряда элементов внутри компонента.

Форма

Вёрстка
по системе

Проектирую и верстаю на шкале отступов и сетке, которые живут и в макете, и в коде, — страницы остаются цельными, сколько бы их ни стало. Расскажите о проекте — отвечу в течение рабочего дня.

Или пишите на [email protected]