Порядок в макете лендинга держится на двух вещах: модульной сетке из 12 колонок и шкале отступов, кратной 8 пикселям - например 8, 16, 24, 32, 64, 96. Когда каждый отступ и блок укладывается в эту сетку, страница читается собранной ещё до того, как посетитель прочитал текст. Расставленные на глаз отступы почти всегда выдают рассинхронизацию, даже если разница всего 4-6 пикселей.
Что глаз считывает за долю секунды
Посетитель не читает лендинг построчно в первые секунды, он сканирует его как единое пятно. Ровные отступы и выровненные блоки мозг читает как сигнал "здесь порядок, можно доверять". Сбитая сетка считывается как небрежность ещё до того, как человек прочитал хоть одно слово оффера.
Разберём, что такое модульная сетка на практике, какой шаг отступов брать и на каких ошибках лендинги теряют вид собранной страницы.
Модульная сетка: 12 колонок
Стандарт для веба - сетка из 12 колонок с одинаковыми промежутками между ними, обычно 20-32 пикселя. Двенадцать делится на 2, 3, 4 и 6 без остатка, поэтому в неё укладывается почти любая раскладка: три карточки услуг по 4 колонки, две колонки текст плюс форма по 6, четыре иконки преимуществ по 3.
Ширина самой сетки на десктопе обычно 1140-1200 пикселей с полями по бокам. Блоки шире этой границы выглядят потерянными на большом мониторе, а картинки, растянутые на весь экран без ограничения, теряют читаемость текста поверх них.
На практике сетку удобно проверять не на каждом блоке отдельно, а сразу на всей странице: наложить прозрачную сетку поверх скриншота лендинга и посмотреть, попадают ли заголовки, кнопки и картинки в границы колонок. Если половина блоков сидит на сетке, а другая половина заезжает на соседнюю колонку на 10-15 пикселей, страница читается рассинхронизированной, даже если каждый блок по отдельности сделан аккуратно.
Почему отступы нельзя расставлять на глаз?
Частая ошибка новичка в вёрстке - расставлять отступы интуитивно: здесь побольше, там поменьше, чтобы смотрелось лучше. Результат почти всегда рассыпается, потому что глаз человека отлично считывает даже разницу в 4-6 пикселей между похожими блоками, просто не может объяснить словами, что не так.
Рабочее решение - шкала отступов, кратная одному числу, чаще всего 8. Значения получаются такими: 8, 16, 24, 32, 48, 64, 96 пикселей. Отступ между строчками текста внутри абзаца - 8 или 16, между заголовком и текстом под ним - 24-32, между соседними блоками лендинга - 64-96. Когда у каждого расстояния есть место в этой шкале, дизайн перестаёт требовать бесконечных правок вида "чуть левее, чуть ближе".
Внутренние и внешние отступы
Внутренний отступ - это padding, расстояние от границы блока до его содержимого. Внешний - margin, расстояние между соседними блоками. Их часто путают и правят не тот, что нужно: карточка с товаром выглядит тесной не потому, что мало места между карточками, а потому, что текст внутри неё прижат к краю.
Правило, которое экономит время: если элементы одной группы должны читаться вместе, увеличивайте внутренний отступ. Если нужно визуально разделить группы между собой, увеличивайте внешний. Блок с тремя пунктами преимуществ смотрится плотным набором именно за счёт того, что отступ внутри карточки меньше, чем отступ между карточками.
Выравнивание по базовой линии текста
Заголовки, подписи и кнопки в разных блоках лендинга должны стоять на одной вертикальной линии, если они логически на одном уровне. Простой пример: если в блоке "что входит" три карточки с иконкой, заголовком и текстом, а у одной карточки заголовок в две строки, а у остальных в одну, текст под заголовками съедет и линия развалится.
Решение - задавать иконке, заголовку и тексту фиксированную минимальную высоту внутри карточки, а не подгонять руками под самый длинный вариант. Тогда карточки с разной длиной текста всё равно выравниваются по нижнему краю. Шрифт и межстрочный интервал подчиняются той же логике, подробнее в статье Типография для лендинга: шрифты, размеры, межстрочный интервал.
Похожая история с иконками. Если в блоке преимуществ шесть карточек и у пяти иконка нарисована с полем 48 на 48 пикселей, а одна взята из другого набора и весит 60 на 44, разница в пропорциях бросается в глаза даже без линейки. Перед вёрсткой стоит свести все иконки блока к единому размеру холста, даже если сам рисунок внутри чуть отличается по плотности.
Три ошибки, которые встречаются чаще всего
- Разные отступы между одинаковыми блоками. Если между первым и вторым разделом 80 пикселей, а между вторым и третьим 55, страница выглядит неаккуратно даже с хорошим дизайном каждого блока по отдельности.
- Текст и кнопка не по сетке. Заголовок начинается с 40-го пикселя от края, а кнопка под ним - с 48-го. Разница в 8 пикселей незаметна по отдельности, но глаз её считывает при взгляде на страницу целиком.
- Картинки без общего формата. Один блок портфолио с фото 4:3, следующий с квадратными - подряд идущие карточки выглядят рваным рядом, даже если сами фотографии хорошие.
Как сетка меняется на мобильном?
На экране шире 1200 пикселей комфортно смотрятся три-четыре колонки, на планшете обычно две, на телефоне сетка почти всегда схлопывается в одну колонку. Отступы при этом не масштабируются пропорционально экрану: внешний отступ между блоками на мобильном уменьшают примерно вдвое, с 96 до 48 пикселей, а не оставляют тем же, что на десктопе, иначе страница становится слишком длинной для прокрутки. Разбор похожих ошибок мобильной вёрстки есть в статье Мобильный UX лендинга: 15 частых ошибок адаптива.
Инструменты для проверки сетки
Быстро проверить сетку без специальных программ можно инструментами разработчика в браузере: клавиша F12, вкладка Elements, у любого блока смотрите computed-значения padding и margin. Расхождения в шкале отступов видно сразу, если знать, что искать.
В Figma для той же цели есть встроенная сетка колонок Layout Grid и плагин Spacing, который подсвечивает расстояние между выделенными слоями в пикселях. Пять минут проверки перед сдачей макета экономят час правок после вёрстки.
Порядок проверки перед публикацией
- Открыть страницу на десктопе шириной 1440 пикселей и включить сетку в devtools.
- Пройти сверху вниз и отметить блоки, которые выходят за границы колонок.
- Сверить отступы между разделами со шкалой, кратной 8 пикселям.
- Переключиться на мобильную ширину 375 пикселей и повторить те же два шага.
- Проверить, что кнопки и заголовки на одном уровне выровнены по общей линии.
Такой прогон занимает 10-15 минут и почти всегда находит одну-две мелкие рассинхронизации, которые не видны при обычном просмотре страницы сверху вниз.
Таблица: шаг отступов по типам блоков
| Место | Отступ | Комментарий |
|---|---|---|
| Между строк текста | 8-16 px | зависит от размера шрифта |
| Заголовок и текст под ним | 24-32 px | меньше выглядит слипшимся |
| Между карточками в ряду | 24-32 px | на мобильном можно сократить до 16 |
| Между разделами лендинга | 64-96 px | на мобильном обычно 40-48 |
| От края экрана до контента | 16-24 px на мобильном, 5-8% ширины на десктопе | поля не должны схлопываться в ноль |
Аккуратная сетка не делает оффер сильнее, но неаккуратная делает его слабее. Это единственная причина этим заниматься.
Частые вопросы
Влияет ли сетка и отступы на скорость загрузки страницы?
Косвенно да, если из-за рассинхронизации блоков верстальщик добавляет лишние обёртки и стили. Но основной риск в другом: картинки без явных width и height или с разными пропорциями в одном ряду вызывают сдвиг макета при загрузке - метрику CLS из документации web.dev. Задавайте размеры изображениям заранее, а не подгоняйте сеткой после загрузки.
Как быстро проверить, что страница не прыгает при загрузке из-за сетки?
Прогоните страницу через PageSpeed Insights и посмотрите показатель CLS в отчёте. Если он выше 0,1, ищите картинку или блок без зарезервированного места - чаще всего это и есть источник сдвига, а не сама сетка.
Обязательно ли использовать именно 12 колонок, а не другое число?
Нет, но 12 удобнее большинства альтернатив, потому что делится без остатка на 2, 3, 4 и 6 - а значит, в неё укладывается почти любая раскладка блоков. Сетка из 10 или 16 колонок тоже рабочая, если её сознательно выбрали и выдержали до конца макета.
Что делать, если дизайнер и верстальщик используют разный шаг отступов?
Зафиксировать одну шкалу до начала вёрстки и передать её вместе с макетом, а не выяснять расхождения постфактум. Обычно хватает одной строки в техническом задании: базовый шаг 8 пикселей, отступы кратны ему.
Коротко
Сетка из 12 колонок и шкала отступов, кратная 8 пикселям, решают большинство проблем с рассыпающимся макетом без переделки дизайна с нуля. Начните с проверки: отступы между одинаковыми блоками совпадают, элементы стоят на общей вертикальной линии, картинки в одном ряду одного формата.
Если после этой проверки страница всё равно выглядит тесной или пустой, дело обычно не в сетке, а в первом экране целиком. Что туда добавить в первую очередь, разобрано в статье 10 элементов первого экрана, которые повышают конверсию лендинга.
Сетка не требует дизайнерского образования, только привычки сверяться с числами вместо ощущения "вроде нормально". После двух-трёх макетов, собранных по шкале отступов, рука сама перестаёт ставить произвольные значения, и проверка перед сдачей превращается в формальность на пять минут, а не в повод переделывать половину страницы.
