Содержание11
Модульная сетка помогает согласовать колонки, зазоры, поля и вертикальные интервалы в макете. Дизайнер раскладывает по ней блоки, а разработчик переносит правила в CSS Grid или контейнеры. Для интернет-магазина это особенно полезно: карточки, фильтры и шапка могут подстраиваться под разные ширины экрана без случайных отступов.
Зачем сетка на сайте и в магазине
Когда у карточек каталога разные поля, соседние элементы перестают совпадать, а часть карточек может не поместиться в ряд. Шапка, контент и форма заявки тоже могут расходиться по краям. Сетка помогает задать общие правила для этих элементов.
Модульная сетка задаёт колонки, зазоры, поля и вертикальные интервалы. Дизайнер раскладывает блоки по этим правилам, а разработчик переносит их в код.
С ней легче добавлять блоки и сохранять выравнивание. Вместо изображения с примерными отступами разработчик получает числа и правила.
Золотое сечение и правило третей помогают строить композицию, но не задают колонки и межколонник.
Сетка задаёт общие правила, по которым дизайнер и разработчик выравнивают элементы.
Из чего состоит сетка: колонки, ряды, gutter и поля
В макете нужно определить колонки, ряды, межколонник, поля и модуль. Если не записать эти параметры, разработчику придётся восстанавливать их по изображению.
Колонки делят ширину контейнера на вертикальные части. Ряды задают горизонтальные ячейки полной модульной сетки. Межколонник (gutter) отделяет соседние колонки, а поля (margin) задают расстояние от края фрейма до крайних колонок.
Padding — внутренний отступ элемента. Он отличается от полей макета и межколонника.
- Колонка — часть ширины, на которую можно поставить блок.
- Ряд — горизонтальная ячейка сетки.
- Gutter — зазор между колонками.
- Margin — расстояние от края фрейма до колонок.
- Модуль — ячейка на пересечении колонки и ряда.
Высота веб-страницы не ограничена, поэтому ряды часто заменяют вертикальным шагом. Направляющие задают расположение элементов по ширине, а шаг помогает согласовать интервалы и высоты.
Модульная и колоночная сетка
Колоночная сетка делит ширину на вертикальные части. Модульная добавляет ряды и ячейки с повторяющимся шагом. Для сайта обычно достаточно колонок и вертикального ритма: высота страницы может увеличиваться по мере добавления контента.
В книге Grid Systems in Graphic Design Йозефа Мюллера-Брокмана описана модульная сетка для печатных материалов. В вебе тоже можно задавать ряды, но фиксировать всю страницу по высоте обычно не нужно.
Для большинства страниц сайта удобнее колоночная сетка с отдельным вертикальным ритмом.
Можно намеренно вынести за пределы колонок героя, промо или цитату. В макете нужно пояснить, как этот элемент должен вести себя при вёрстке. Случайный сдвиг, который не объяснён в файле, может нарушить выравнивание.
Принцип общих чисел полезен и в дизайне полиграфии. Для веба важно, чтобы правила из макета совпадали с теми, по которым собирают страницу.
Сколько колонок брать
Число колонок зависит от блоков страницы. Двенадцать удобно делить на 2, 3, 4 и 6 частей, но простому лендингу может хватить более крупной сетки, а панели управления — более дробной.
Шесть или восемь колонок подойдут лендингу с крупными секциями. Четыре колонки используют на коротких экранах и в мобильной версии. Шестнадцать помогают раскладывать плотные таблицы и боковые панели, но для маркетингового лендинга это обычно лишняя детализация.
| Число колонок | Какие блоки собираются | Когда брать |
|---|---|---|
| 4 | Одна колонка контента, пара крупных пятен | Короткий экран, промо без витрины |
| 6 | Половина, треть, две трети ширины | Простой лендинг из секций |
| 8 | Четверти и половины, карточки по две–четыре | Лендинг с блоками услуг |
| 12 | Треть, четверть, шестая, половина | Интернет-магазин, блог, большинство сайтов |
| 16 | Узкие ячейки, колонки таблиц, боковые панели | CRM-дашборд, админка |
В каталоге карточки можно раскладывать по схемам 4->2->1 или 3->1. Шапке и фильтрам иногда нужна отдельная сетка. Если одним набором колонок пытаться управлять всеми блоками, их поведение на узком экране может стать неудобным.
Для лендинга с крупными секциями я бы начал с 6 или 8 колонок. Если на десктопе нужны трети и шестые доли, выбирайте 12.
Как рассчитать сетку
Расчёт начинается со списка блоков и ширины контейнера. Затем выбирают число колонок, зазор и поля так, чтобы их сумма соответствовала ширине фрейма.
Шаг 8 px используют как основу для интервалов, а в плотных интерфейсах выбирают и меньший шаг. Не нужно подчинять ему каждое расстояние: если содержимое теснится, сетку стоит подстроить под задачу. Вертикальный ритм помогает согласовать строки, карточки и интервалы секций.
Например, при колонках шириной 64 px, межколоннике 24 px и 12 колонках сумма колонок и внутренних зазоров составляет 1032 px. Остальную ширину фрейма занимают поля по краям и свободное место контейнера. Это пример расчёта, а не рекомендуемый шаблон для каждого сайта.
Ширину контейнера и поведение сетки сверяют с выбранным фреймворком. Например, у Bootstrap есть собственные правила для контейнеров; проверьте документацию используемой версии перед передачей макета.
Если сумма не сходится, измените один из параметров и пересчитайте макет.
Сетка во фрейме и Layout grid
В графическом редакторе настройте Layout grid во фрейме страницы: укажите колонки, межколонник и поля. Это поможет передать разработчику правила, по которым собирали макет.
При настройке Stretch колонки занимают доступное место между полями, а редактор рассчитывает их ширину. В режимах Center, left и right ширина колонок остаётся фиксированной, меняется положение сетки.
Запишите рядом с фреймом число колонок, gutter, поля и ширину контейнера. Если параметры трудно найти в файле, разработчику придётся восстанавливать их по изображению.
- Columns — число колонок.
- Gutter — зазор между колонками.
- Margin — поля до первой и последней колонки.
- Stretch — колонки занимают доступную ширину.
- Center / left / right — фиксированная ширина колонок и разное положение сетки.
Привязывайте элементы к колонкам, а отступы выбирайте с учётом общего шага. Если блок стоит почти у направляющей, уточните его положение до передачи в разработку.
Сдача сетки в вёрстку
Передайте разработчику число колонок, ширину контейнера, межколонник, поля, поведение на разных ширинах и вертикальный шаг. Тогда он сможет повторить правила макета в CSS Grid.
В CSS Grid колонки задают как треки, а промежутки — через column-gap. Внешний контейнер может ограничивать ширину сетки, но сами колонки и межколонники всё равно нужно настроить по макету. Фреймворк не восстановит эти параметры автоматически.
Контент определяет доли, макет задаёт колонки и промежутки, а CSS Grid повторяет их в коде. Перед сдачей проверьте, что эти правила согласованы.
Тени и отрицательные отступы могут визуально изменить расстояния между блоками. Декоративные слои могут выходить за пределы колонок. Подпишите такие решения, чтобы разработчик не принял их за ошибку.
Сетку закладывают при дизайне сайта, контента и медиа. Если её добавлять после вёрстки, часть блоков может потребовать переработки.
Адаптив колонок от 1440 до 320
На разных ширинах число колонок и положение блоков меняются. Например, блок, который занимал несколько долей на широком экране, на узком может растянуться на всю ширину контейнера.
Ширины 320, 576, 768, 992, 1200, 1400 и 1920 px встречаются в готовых системах сеток, но не подходят автоматически каждому сайту. Выбирайте точки перестроения по содержимому и проверяйте их в макете и коде.
| Ширина фрейма | Как меняется сетка | Карточки схемы 4->2->1 |
|---|---|---|
| 1440 | Много колонок, карточки стоят в ряд | 4 карточки в ряд |
| 1024 | Блоки занимают больше долей | 2–4 карточки, в зависимости от ширины карточки |
| 768 | Блоки перестраиваются в 2–4 доли | 2 карточки в ряд |
| 320 | Одна колонка контента | 1 карточка в ряд |
Шапка, фильтры и карточки товара могут переходить на разные схемы. Например, фильтры раскрываются отдельной панелью, а меню уходит в компактный режим. На узком экране это может потребовать отдельной сетки для каждого блока.
Проверяйте макет на ширинах, где содержимое начинает тесниться. Если витрина, фильтры и шапка должны перестраиваться по-разному, одной сетки для всех элементов не хватит.
Ошибки и чек-лист приёмки
Проверьте, что в макете указаны параметры сетки, отступы выглядят согласованно, а ключевые блоки привязаны к колонкам. Если вы намеренно вывели элемент за сетку, подпишите это решение и покажите, как его собрать в коде.
- 01
Запишите колонки, gutter, margin и ширину контейнера.
- 02
Укажите поведение сетки на разных ширинах.
- 03
Покажите мобильную схему карточек в отдельных фреймах.
- 04
Подпишите отдельную сетку для шапки и фильтров, если она нужна.
- 05
Отметьте намеренные выходы элементов за пределы колонок.
- 06
Проверьте, что параметры макета можно найти в файле.
- 07
Передайте разработчику правила для CSS Grid.
Попросите коллегу сверить эти параметры с макетом перед передачей в разработку. Так проще заметить расхождения до сборки страницы.
Если нужен сайт с продуманной сеткой, начните с выбора сайта для бизнеса в Новороссийске. Передайте дизайнеру и разработчику параметры макета, чтобы они согласовали правила до сборки.
Источники
- CSS Grid Layout — MDN Web Docs
- Основные понятия CSS Grid — MDN Web Docs
