Колонки и промежутки

Что это такое

Набор колонок задаёт число вертикальных дорожек, в которые ставится содержимое, а промежутки — зазоры между ними. Расстояние от крайних колонок до края окна занимают поля, и вместе эти три вещи составляют скелет каждого экрана.

Почему это важно

Согласованность колонки дают бесплатно, потому что работают ограничением. Ставя карточку, дизайнер выбирает край, который уже существует, а не выдумывает новый. Когда ту же карточку строит инженер, ширина получается умножением, а не измерением. Удачно выбранное число колонок определяет ещё и то, что даётся легко: набор из двенадцати колонок делится на половины, трети, четверти и шестые доли без дробей — поэтому он и пережил своё печатное происхождение.

Ключевые идеи

Считайте колонки по тому, на что нужно делить

Двенадцать чисто делится на 2, 3, 4 и 6. Каким бы ни было число, проверка одна: какие распространённые раскладки дают целые колонки без остатка.

12 колонок   половины 6+6, трети 4+4+4, четверти 3+3+3+3, шестые 2x6
16 колонок   больше гибкости, больше способов быть несогласованным

Промежуток пусть остаётся постоянным, а поля масштабируются

Промежуток держит ритм между блоками стабильным, если не меняется вместе с окном. Поля же расширяются на больших экранах, чтобы строка не становилась слишком длинной.

Промежуток   24px на любой ширине
Поля         16px на телефоне, 40px на планшете, 80px на широком экране

Содержимое занимает колонки, а не их доли

Каждый элемент начинается и заканчивается на краю колонки. Элемент «шириной примерно 30%» нельзя переиспользовать на другом экране и нельзя объяснить разработчику.

Сужайте текст, а не всю сетку

Основной текст должен идти примерно на 6–8 колонках из набора в 12; остальные колонки держат пустоту или боковую панель. Однако расширять текст, чтобы заполнить сетку, не стоит: так удобная строка превращается в нечитаемую.

Делайте сетку видимой во время работы и невидимой в готовом виде

Накладывайте её в работе и снимайте на ревью. Если готовому экрану нужна накладка, чтобы его понять, раскладка делает то, чего сетка не задумывала.

Практика

Выберите набор колонок для одного продукта

Выберите число, промежуток и три размера полей, а затем разложите одну и ту же страницу списка на каждой из трёх ширин.

Готово, когда: каждый блок стоит на краю колонки на каждой ширине, и основной текст нигде не превышает восьми колонок.

Пересоберите один экран на сетке

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

Готово, когда: ни один элемент не начинается со случайного смещения, и страница читается так же или лучше, чем раньше.

Частые ошибки

Нечётное число колонок — половины и трети требуют дробей, и ничего не выравнивается; исправить: выберите число с многими делителями, например двенадцать.
Промежуток меняется вместе с шириной — вертикальный ритм сдвигается, и блоки выглядят по-разному расставленными на каждом экране; исправить: зафиксируйте промежуток и масштабируйте вместо него поля.
Элементы произвольной ширины — раскладку нельзя переиспользовать или воспроизвести; исправить: занимайте только целые колонки.
Текст заполняет все колонки — строка растёт вместе с экраном, и чтение страдает; исправить: ограничьте основной текст шестью-восемью колонками.
Проектирование с включённой накладкой — сетка становится видимой структурой, а не ориентиром; исправить: делайте ревью без накладки и судите результат сам по себе.

Что читать дальше

Макетирование и сеточные системы (03-design-ux/30-layout-grid-systems) — трек, который открывают эти колонки.
Точки перелома (03-design-ux/30-layout-grid-systems/02-breakpoints) — как набор колонок приспосабливается к разным ширинам.
Каскадные таблицы стилей (CSS) (02-frontend/05-css) — режимы раскладки в браузере, которые ставят содержимое на эти колонки.
Типографика (03-design-ux/28-typography) — строка, ради которой выбирают эти пролёты колонок.