Бывает так: смотришь на свой макет — вроде всё выровнено, цвета в порядке, шрифты подобраны, а ощущение «чего-то не хватает» не отпускает. Показываешь коллеге — тот тоже не может ткнуть пальцем, но соглашается: «да, сыровато». Почти всегда причина одна и та же — разнобой в отступах. Здесь 12 пикселей, там 14, тут 15 «на глаз», и этот мелкий шум глаз считывает как небрежность, даже не осознавая его. Сетка из кратных значений убирает шум одним движением.
Правило до смешного простое: все отступы и размеры кратны 8, а для мелких деталей допускается 4. Ваша шкала — 4, 8, 16, 24, 32, 40, 48, 64. Вместо мучительного «поставлю-ка 13, нет, 15» вы выбираете из короткой лестницы значений. Решений становится меньше, а согласованность — выше. Это тот редкий случай, когда ограничение делает работу и быстрее, и красивее.
Почему именно восемь
Восьмёрка выбрана не из эстетики, а из практики. Она хорошо делится — пополам это 4, ещё раз 2, — поэтому мелкие детали всё равно попадают в ритм. Она ровно ложится на экраны с разной плотностью пикселей, включая ретину, где всё удваивается. И она даёт достаточно ступеней, чтобы не оказаться в ловушке «или слишком тесно, или уже слишком пусто» — между 8 и 16 обычно ничего и не нужно. Можно строить систему и на 4, и на 10, но именно 8 попала в золотую середину, и потому стала негласным стандартом индустрии.
Ритм важнее линейки
Главное заблуждение новичка — думать, что сетка это про то, чтобы «всё было ровно». На деле она про ритм: одинаковые расстояния между однородными вещами и осознанно разные между разными. Заголовок отстоит от текста на одну ступень, блок от блока — на две, секция от секции — на три. Когда эти интервалы взяты из общей шкалы, страница читается как музыка с ровным тактом, а не как набор случайно приземлившихся элементов. Зритель не считает пиксели — он чувствует порядок.
Отсюда простое следствие: внутренние отступы (между тесно связанными элементами) берите маленькими ступенями, внешние (между смысловыми блоками) — крупными. Разница в масштабе интервалов сама подскажет глазу, что к чему относится. Это работает даже без единой линии-разделителя.
Как внедрить в Rugma
Технически всё просто. Заведите шкалу отступов как токены — space/1, space/2 и так далее — и пользуйтесь только ими, никаких сырых чисел. Дальше редактор помогает держать ритм сам: включите «Привязку к сетке» (G), и элементы начнут липнуть к узлам, а «Умные направляющие» (Shift+G) подсветят, когда отступ совпал с соседним. Вам остаётся не бороться с пикселями, а выбирать ступень.
Особенно хорошо сетка дружит с авто-лейаутом: gap и padding во фрейме — это ровно значения вашей шкалы, и тогда ритм держится автоматически при любой правке контента. Один раз задали gap: 16 — и десять карточек стоят с идеальным интервалом, даже когда их станет двадцать.
Попробуйте прямо сейчас. Откройте редактор, включите привязку к сетке клавишей G и соберите простую карточку: картинка, под ней заголовок с отступом 8, описание с отступом 8, кнопка с отступом 16 от текста. Теперь попробуйте намеренно сдвинуть один элемент на 3 пикселя «на глаз» и верните обратно на узел сетки — вы своими глазами увидите, как макет из «почти нормально» становится «собранно».
Отступы и колонки — две разные сетки
Часто путают два инструмента, которые называют одним словом «сетка». Первый — шкала отступов, о которой мы говорили: она про вертикальный ритм и расстояния между элементами. Второй — колоночная сетка: вертикальные полосы, по которым выравнивается ширина блоков на странице. Двенадцать колонок с одинаковыми жёлобами — классика веба, потому что 12 делится на 2, 3, 4 и 6, а значит один и тот же ряд легко превращается в две, три или четыре карточки без пересчёта.
Работают они в паре: колонки задают, где начинаются и заканчиваются блоки по горизонтали, шкала отступов — как элементы дышат внутри и между собой по вертикали. Когда обе завязаны на кратные значения, макет собирается предсказуемо и на десктопе, и на планшете. В редакторе колоночную подложку удобно держать во фрейме-контейнере страницы, а вертикальный ритм — в авто-лейауте секций.
И маленькая, но важная деталь: жёлоб между колонками — это тоже отступ, и он обязан быть из вашей шкалы. Иначе горизонтальный ритм разойдётся с вертикальным, и вернётся то самое неуловимое ощущение «сыровато», от которого мы весь текст и уходим.
Когда можно нарушать
Сетка — не догма, а опора. Оптическая коррекция иногда требует отойти от строгих чисел: круглая иконка рядом с прямоугольной кнопкой может выглядеть смещённой, хотя по числам стоит ровно, — и тогда глаз важнее линейки. Крупная типографика тоже живёт по своим законам межстрочных интервалов. Но эти исключения работают только на фоне общей дисциплины: нарушать ритм осмысленно можно лишь там, где он сначала выстроен. Начните с восьмёрки — и уже через неделю «неровные» чужие макеты начнут резать вам глаз. Это и есть выработанный вкус к ритму: не врождённый талант, а натренированная привычка выбирать значения из шкалы, а не из воздуха. И самое приятное — этот навык переносится на любой инструмент и любой проект, оставаясь с вами навсегда.