Сетка и отступы: правило 8 пикселей

Аккуратный сайт отличается от неаккуратного чаще всего не цветами, а отступами. Достаточно одной шкалы и одного правила группировки.

Шаг 8 пикселей

Все размеры и отступы берите кратными 8: 8, 16, 24, 32, 48, 64. Для мелочей, например расстояния между значком и подписью, допустим полушаг 4. Числа делятся без остатка на большинстве экранов, а глаз видит единый ритм, даже если не может его объяснить.

:root { --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; }

Закон близости

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

Сетка колонок

На компьютере удобна сетка из 12 колонок: на неё ложатся и две, и три, и четыре карточки в ряд. Промежуток между колонками 16–32 пикселя. На телефоне все блоки обычно встают в одну колонку, а боковые поля 16 пикселей.

.grid { display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

Такая сетка сама меняет число колонок под ширину экрана.

Внутренние отступы

• Кнопка: 12–16 по вертикали и 20–24 по горизонтали.
• Карточка: 16–24 со всех сторон.
• Между разделами страницы: 64–96 на компьютере, 48 на телефоне.

Про отступы в тексте подробнее в статье «Типографика для сайта». Готовые шаблоны сайтов уже собраны по этим правилам.

Частые вопросы

Что такое правило 8 пикселей?

Все размеры и отступы берутся кратными 8: 8, 16, 24, 32, 48, 64. Для мелких промежутков допустим полушаг 4.

Как отступы помогают группировать элементы?

Внутри группы отступ меньше, чем между группами. Тогда глаз сам видит, что подпись относится к своему полю, а заголовок к своему тексту.