Материал статьи

Руководство по модульной сетке: контейнер, колонки, ритм, адаптивные состояния и приёмка на реальном контенте.

Модульная сетка в веб-дизайне: как построить и применять: обложка

Схематичная иллюстрация основной идеи материала без текста и логотипов.

Оглавление

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

От контента к геометрии

Модульная сетка в веб-дизайне: как построить и применять: рабочий процесс

Визуальное представление ключевого процесса и его этапов.

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

Контейнер должен иметь понятное поведение: фиксированный максимум на широком экране, боковые поля и безопасное сжатие. Не смешивайте ширину текста и ширину медиа без причины. Узкая колонка улучшает чтение, но может сделать форму или таблицу непрактичной.

Явные роли областей

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

Модульная сетка в веб-дизайне: как построить и применять: проверка качества

Иллюстрация критериев проверки и принятия решения.

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

Число колонок выбирайте под повторяющийся модуль и контент, а не под популярный шаблон. Важно согласовать внутренний gutter, внешние поля и минимальную ширину карточки. Если при уменьшении viewport карточки становятся уже текста кнопки, сетка нарушает задачу, даже если линии математически сходятся.

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

Неровные модули

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

Вертикальная логика страницы

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

Ритм лучше проверять на нескольких типах страниц: статья, каталог, карточка услуги и форма. Если один блок постоянно требует отрицательных margin, проблема обычно в контракте компонента, а не в конкретном макете. Исправляйте правило на уровне системы.

Типографический якорь

Размер строки и line-height влияют на то, как визуально читается сетка. Задайте ширину текстовой колонки и проверьте длинные слова, числовые значения и ссылки. Заголовок, который занимает четыре строки вместо двух, может изменить всю композицию — это нужно учитывать до финальной верстки.

Адаптивность как набор состояний

Не описывайте адаптивность только словами «desktop, tablet, mobile». Для каждого компонента укажите, что происходит: колонки складываются, боковой блок уходит вниз, навигация становится горизонтально прокручиваемой или заменяется кнопкой. Между контрольными точками система должна вести себя предсказуемо.

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

Изображения внутри модулей

Согласуйте aspect-ratio и правила crop заранее. Изображение не должно менять высоту карточки случайно, если список должен оставаться выровненным. Для смысловой фотографии добавьте вариант с безопасной зоной; для декоративной — допускайте обрезку, но не теряйте контраст текста.

Сетка как контракт компонентов

В дизайн-системе храните не только числа колонок, но и разрешённые размеры, gap, отступы и состояния. Компонент должен объяснять, какие области он принимает и как ведёт себя при нехватке места. Тогда макет можно собрать из повторяемых блоков, а не из локальных исключений.

Сверяйте дизайн и код на одном наборе контента. Если разработчик вынужден подбирать margin по скриншоту, значит контракт неполный. Добавьте в документацию пример длинного текста, отсутствующего изображения, ошибки и локализованной строки.

Проверка на реальном макете

Перед утверждением откройте страницу в самом узком и самом широком варианте, затем пройдите промежуточные точки. Сравните линии заголовков, края контента, положение CTA и высоту карточек. Отдельно включите увеличенный размер шрифта и длинные названия — сетка должна оставаться рабочей и в доступном режиме.

Зафиксируйте отклонения как решения: где сетка сознательно нарушена ради фокуса, а где требуется исправление компонента. Это предотвращает спор «по пикселям» и сохраняет логику для следующего экрана.

Когда правило уступает содержанию

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

Проверьте, что исключение не ломает соседние сценарии: длинную локализацию, zoom 200%, печать и клавиатурный путь. Если подобных исключений становится много, пересмотрите базовую сетку или разделите компонент. Система должна становиться понятнее после добавления экрана, а не обрастать локальными патчами.

Сценарий проектирования страницы

Возьмите страницу услуги с заголовком, преимуществами, тарифами, отзывом и формой. Сначала определите текстовую колонку и место основного действия, затем распределите вторичные блоки. Проверьте, что посетитель видит связь между обещанием и формой, а сетка не делает декоративный блок визуально важнее CTA.

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

Каталог и статья

В каталоге приоритетом становится сравнение повторяющихся объектов, поэтому карточки должны иметь общий ритм. В статье приоритетом является чтение, значит текстовая колонка может быть уже сетки карточек. Один глобальный контейнер не обязан одинаково обслуживать все типы страниц.

Контракт между макетом и CSS

Опишите, какие свойства задаются контейнером, а какие компонентом. Grid может отвечать за расположение, карточка — за внутренние отступы, типографический токен — за строку. Не передавайте компоненту знание о соседнем блоке: это делает его непереносимым.

Проверьте каскад при вложении. Компонент внутри боковой панели и тот же компонент в основной колонке должен корректно сжиматься или явно объявлять минимальную ширину. Избегайте селекторов, которые меняют внутренние отступы только потому, что рядом появился другой класс.

Переполнение

Откройте макет с длинным URL, числом, локализованной кнопкой и таблицей. Скрывать overflow допустимо только если потеря содержимого невозможна и есть способ его увидеть. В остальных случаях перенос, прокрутка или новая строка должны быть частью дизайна, а не аварийным CSS-патчем.

Доступность и сетка

Проверьте порядок чтения в DOM отдельно от визуального расположения. Перемещение блока на мобильном не должно ставить кнопку раньше объяснения или заголовок после формы. При увеличении шрифта на 200% элементы должны оставаться доступными, даже если визуальные пропорции изменились.

Проверьте клавиатурный фокус и области нажатия. Сетка не должна создавать узкие кликабельные элементы или перекрывать фокус соседним блоком. Для RTL и длинной локализации заранее определите, какие правила зеркалятся, а какие остаются прежними.

Документация и контроль изменений

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

При изменении токена найдите потребителей и проверьте эталонные маршруты. Автоматические скриншотные тесты полезны, но не заменяют проверку чтения и клавиатуры. Сохраняйте решение в changelog дизайн-системы, чтобы команда понимала, почему изменилась геометрия.

Последовательность приёмки

  1. Проверить реальный контент и ширину чтения.
  2. Сверить контейнер, поля, колонки и gap.
  3. Открыть промежуточные ширины.
  4. Проверить длинные строки, ошибки и пустые состояния.
  5. Пройти клавиатурой и увеличить текст.
  6. Проверить порядок DOM и локализацию.
  7. Сверить макет с токенами компонентов.
  8. Зафиксировать осознанные исключения.

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

Диагностика расхождения

Когда макет и браузер расходятся, сначала проверьте исходные условия: шрифт, zoom, ширину viewport и реальный текст. Затем определите, где возникло отклонение — контейнер, колонка, gap, внутренний padding или высота строки. Исправляйте первопричину, а не добавляйте локальный margin.

Сохраните минимальный пример компонента, на котором видна проблема. Он пригодится при изменении токенов и поможет понять, относится ли дефект к одному шаблону или ко всей системе. После исправления повторите проверку на соседних ширинах и в состоянии длинной локализации.

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

Передача сетки в разработку

Передайте не только скриншот, но и значения контейнера, диапазоны ширин, токены gap, правила переноса и список исключений. Укажите, какой блок имеет приоритет при нехватке места. Это позволяет реализовать сетку без угадывания по пикселям и уменьшает число расхождений на промежуточных ширинах.

После реализации сравните страницу с эталоном на реальном контенте и внесите замечания в систему компонентов. Не исправляйте один экран локально, если ошибка относится к общему токену. Хорошая документация делает следующее изменение дешевле, чем предыдущее.

Контрольные вопросы перед выпуском

Какая колонка отвечает за чтение, какая — за действие, и что произойдёт при нехватке места? Выдержит ли компонент длинное слово, две строки кнопки, пустое изображение и увеличенный шрифт? Совпадает ли визуальный порядок с порядком чтения? Где зафиксированы допустимые исключения?

Проверьте эти вопросы на странице, которая не участвовала в разработке сетки. Новый контент лучше выявляет слабый контракт, чем эталонный макет. Если ответ зависит от случайного margin, вернитесь к правилам компонента.

Что зафиксировать в отчёте

Запишите контейнеры, контрольные ширины, проверенные состояния и намеренные исключения. Добавьте страницу с длинным контентом и экран после увеличения шрифта. Такой набор показывает, что сетка является системой правил, а не совпадением одного макета.

Отдельно откройте страницу в печати и при увеличении масштаба. Если скрытый декоративный блок меняет порядок чтения или обрезает действие, это уже дефект контракта, а не косметическое отличие макета.

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

Нужны ли 12 колонок?

Нет. Число колонок выбирают по задачам и типовым композициям.

Можно ли нарушать сетку?

Да, если это осознанное исключение, которое помогает содержанию и описано в системе.

Что важнее — сетка или контент?

Контент и задача первичны; сетка помогает сделать решение последовательным.

Вывод

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

Похожие материалы

Подробнее об услуге: профильная услуга Granat.