Откройте два экрана одного магазина — главную и карточку товара — и присмотритесь к отступам. Если блоки «гуляют», ширина контента скачет, а карточки товара выстроены каждая по-своему, дело почти всегда в одном: у проекта нет единой модульной сетки. Дизайн выглядит любительским не из-за цвета или шрифта, а из-за того, что элементы не выровнены по общему каркасу.
Эта статья — о том, как модульная сетка превращает набор экранов в цельный интерфейс магазина на 1С-Битрикс: из чего она состоит, почему прижились 12 колонок, как связать сетку с шаблоном сайта и компонентами каталога и что проверить перед запуском. Если старый шаблон давно оброс разнородной версткой, начать стоит с аудита и оптимизации 1С-Битрикс — он показывает, где именно сетка «сломана».
Коротко
- Модульная сетка — единый каркас из колонок и отступов, к которому привязаны все блоки страницы.
- 12 колонок удобны: делятся на 2, 3, 4 и 6, поэтому под них легко верстается каталог и блоки преимуществ.
- Сетку задают один раз в шаблоне сайта, и ей подчиняются штатные компоненты и кастомные блоки.
- Модульность ускоряет верстку, наполнение и редизайн, а фиксированные размеры блоков ещё и снижают сдвиги макета.
Зачем магазину модульная сетка
Модульная сетка решает три задачи разом: делает дизайн визуально аккуратным, ускоряет разработку и упрощает поддержку. Аккуратность — самое очевидное: когда блоки выровнены по общим направляющим, глаз считывает страницу как единое целое, а не как набор случайно сложенных карточек. Это напрямую влияет на доверие: собранный интерфейс выглядит профессионально ещё до того, как посетитель прочитал хоть строчку.
Второе — скорость. На готовой сетке верстальщик не изобретает ширины и отступы для каждого блока, а собирает страницу из совместимых модулей. Третье — поддержка: новый лендинг, акция или раздел собираются из тех же деталей и предсказуемо встают в макет. Без сетки каждая правка рискует сломать соседний блок, а проект накапливает технический долг.
Из чего состоит сетка: колонки, поля, отступы
Сетка — это не только вертикальные полосы. У неё несколько параметров, и они работают вместе:
- Колонки (columns). Вертикальные полосы, по которым выравнивается контент. Их число фиксировано на весь проект.
- Промежутки (gutters). Расстояния между колонками. Они задают «воздух» и не дают блокам слипаться.
- Поля (margins). Отступы от краёв экрана до рабочей области. Держат контент в читаемой ширине.
- Контейнер (container). Максимальная ширина рабочей области, за которую контент не выходит на больших мониторах.
Ключевая идея — все эти значения заданы один раз и переиспользуются. Промежуток между карточками, отступ секции от секции, поля контейнера берутся из одного набора величин, а не назначаются на глаз. Тогда страница дышит в едином ритме.
Почему 12 колонок стали стандартом
12 — число с большим количеством делителей: 2, 3, 4 и 6. Это ровно те раскладки, которые нужны магазину. Каталог по 3 товара в ряд — это блоки по 4 колонки; по 4 товара — по 3 колонки; «6 иконок преимуществ» — по 2 колонки. Всё укладывается без остатка и дробей.
| Раскладка | Ширина блока | Типовое применение |
|---|---|---|
| 2 в ряд | 6 + 6 колонок | Текст + изображение, две акции |
| 3 в ряд | 4 + 4 + 4 | Каталог, блоки услуг |
| 4 в ряд | 3 + 3 + 3 + 3 | Плотный каталог, подборки |
| Контент + сайдбар | 8 + 4 или 9 + 3 | Каталог с фильтром, статья |
| 6 иконок | 2 × 6 | Преимущества, гарантии |
Можно взять и другую сетку — 16 колонок для очень плотных интерфейсов, 8 для простых. Но 12 остаётся золотой серединой: достаточно гибкая для сложного каталога и достаточно простая, чтобы не путать команду.
Модуль как единица дизайна
Модульная система — это не только сетка, но и принцип: страница собирается из повторяемых блоков-модулей, а не рисуется целиком. Модуль — это законченный элемент: карточка товара, баннер, блок отзывов, форма подписки. У каждого свои правила отступов и поведения, но все они укладываются в общую сетку.
Выгода в переиспользовании. Один раз спроектированная карточка товара работает в каталоге, в блоке «с этим покупают», в результатах поиска и в подборках. Один баннер-модуль обслуживает и главную, и раздел. Это ускоряет и дизайн, и разработку, и наполнение: контент-менеджер собирает страницу из готовых деталей, а не верстает вручную.
Брейкпоинты и адаптив без хаоса
Магазин смотрят с монитора, планшета и смартфона, и сетка должна перестраиваться под ширину экрана. Делается это через брейкпоинты — контрольные точки, на которых меняется число колонок и раскладка блоков.
- Десктоп. 12 колонок, каталог по 3–4 товара в ряд, контейнер ограничен по ширине.
- Планшет. Сетка ужимается (обычно до 8 колонок), каталог перестраивается на 2–3 товара в ряд.
- Смартфон. 4 колонки или одна колонка контента, блоки складываются друг под друга, кнопки становятся крупнее.
Главное правило — брейкпоинтов должно быть немного и они общие для всего проекта. Когда каждый блок ломается на своей ширине, адаптив превращается в лоскутное одеяло, которое невозможно поддерживать. Единый набор брейкпоинтов в шаблоне держит поведение предсказуемым.
Вертикальный ритм и типографика
Сетка обычно ассоциируется с колонками, но не менее важна вертикаль. Вертикальный ритм — это система отступов между заголовками, абзацами и секциями, кратных единому шагу (например, 8 пикселям). Когда все вертикальные расстояния кратны одному числу, страница выглядит выверенной, а не «слепленной».
Типографика подчиняется тому же принципу: размеры шрифтов, межстрочные интервалы и отступы заголовков берутся из одной шкалы. Это особенно заметно в карточке товара и в статьях блога, где много текста. Единая шкала избавляет от ситуации, когда один заголовок «прижат» к тексту, а другой висит в пустоте.
Сетка в шаблоне 1С-Битрикс
В 1С-Битрикс дизайн распространяется через шаблон сайта: именно в нём описаны контейнер, колонки, отступы и брейкпоинты. Если сетка задана в CSS шаблона аккуратно, ей автоматически подчиняются и штатные компоненты каталога, и кастомные блоки, которые выводятся внутри рабочей области.
Штатные компоненты Битрикса — catalog, catalog.section, умный фильтр catalog.smart.filter — выводят разметку через шаблоны компонентов. Чтобы они попали в общую сетку, их обёртки и классы приводят к тем же величинам, что и остальной сайт. Проблемы начинаются, когда каждый компонент тащит свою ширину и свои поля — тогда сетка рассыпается именно на страницах каталога. Как устроена связка шаблонов сайта и компонентов, мы подробно разбираем в статье про разработку собственного модуля Битрикс, где та же логика переиспользования применяется к коду.
Карточка товара и каталог на сетке
Каталог и карточка товара — самые нагруженные страницы, и именно на них сетка приносит максимум пользы. В каталоге сетка держит карточки одинаковыми по ширине и выровненными по рядам, даже когда у товаров разной длины названия и по-разному помещаются бейджи «хит» или «скидка».
В карточке товара сетка помогает расставить приоритеты. Главные элементы — галерея, цена, кнопка «в корзину» — занимают заметные зоны, характеристики и описание уходят ниже, блок «с этим покупают» встаёт на всю ширину. Без сетки карточка быстро превращается в набор разнокалиберных блоков, где взгляд не находит главное. Автоматическое наполнение таких блоков данными из учётной системы — отдельная задача, которую закрывает автоматизация на 1С: цены, остатки и характеристики приходят обменом, а сетка отвечает за то, как это показать.
Сетка и скорость загрузки
Хорошая новость: современная сетка почти ничего не стоит по производительности. CSS Grid и Flexbox — нативные механизмы браузера, они быстры и не требуют тяжёлых библиотек. Более того, сетка помогает скорости: когда у блоков заданы размеры, браузер резервирует под них место заранее и не «дёргает» макет при загрузке.
- Меньше сдвигов макета (CLS). Фиксированные зоны под изображения и карточки уменьшают прыжки контента при загрузке.
- Предсказуемый рендеринг. Браузер быстрее раскладывает страницу, когда структура описана системно.
- Меньше правок-заплаток. Единая сетка не тянет за собой гору переопределяющих стилей, которые раздувают CSS.
Скорость магазина — это в первую очередь тяжёлые изображения, лишние скрипты и настройка кэша и композитного сайта на стороне сервера. Инфраструктурная часть, от которой зависит время ответа, — тема статьи про хостинг и инфраструктуру на BitrixVM; сетка же отвечает за клиентскую часть и стабильность макета.
Готовые решения и совместимость
Многие магазины на 1С-Битрикс стартуют с готового решения из Маркетплейса — «Аспро», «Крайт» и подобных. У них своя проработанная сетка, и это плюс: не нужно собирать каркас с нуля. Но при доработках важно не воевать с их сеткой, а встраиваться в неё: новые блоки собирать по тем же колонкам и брейкпоинтам, что использует шаблон решения.
Типичная ошибка — добавить лендинг или кастомный блок «по своим правилам» поверх готового решения. Внешне он может выглядеть нормально, но на других разрешениях ломается, потому что живёт не по общей сетке. Прежде чем дорабатывать чужой шаблон, стоит разобраться в его структуре — этому помогает автоматизация продаж и склада на 1С в паре с фронтендом: данные и представление проектируются согласованно. Как расширять готовые решения безопасно, мы показываем в материале про разработку модуля для маркетплейса на Битрикс.
Частые ошибки
- Несколько сеток на проекте. Главная на 12 колонок, каталог на 10, лендинги «по месту» — блоки перестают быть совместимыми.
- Отступы «на глаз». Каждый блок с уникальными полями вместо значений из единой шкалы — страница теряет ритм.
- Компоненты вне сетки. Штатный каталог выводит свою ширину и поля, и сетка ломается именно на важных страницах.
- Слишком много брейкпоинтов. Каждый блок ломается на своей ширине — адаптив невозможно поддерживать.
- Нет вертикального ритма. Горизонталь выровнена, а вертикальные отступы случайны — макет всё равно выглядит небрежно.
- Война с готовым решением. Кастомные блоки поверх шаблона Маркетплейса «по своим правилам» ломаются на других разрешениях.
- Сетка без карточки товара. Каталог выровнен, а карточка собрана хаотично — теряется главная конверсионная страница.
Чек-лист внедрения
- Одна сетка на проект. Число колонок, промежутки, поля и ширина контейнера зафиксированы и описаны в шаблоне.
- Единая шкала отступов. Все вертикальные и горизонтальные расстояния кратны общему шагу.
- Немного брейкпоинтов. Общий набор контрольных точек для десктопа, планшета и смартфона.
- Компоненты в сетке. Штатный каталог, фильтр и кастомные блоки приведены к общим ширинам и полям.
- Карточка и каталог проверены. Карточки выровнены по рядам, карточка товара собрана по приоритетам.
- Типографика по шкале. Размеры шрифтов, интервалы и отступы заголовков берутся из одной системы.
- Проверка на устройствах. Макет протестирован на реальных экранах, а не только в одном разрешении.
- Совместимость с решением. Доработки встроены в сетку готового шаблона, а не поверх неё.
Вывод
Модульная сетка — это то, что отличает собранный магазин от «сложенного на глаз». Она держит блоки в одном ритме, ускоряет верстку и наполнение, упрощает редизайн и даже помогает скорости, уменьшая сдвиги макета. Причём почти вся выгода достаётся бесплатно: современный CSS реализует сетку нативно.
Начните с одного каркаса на весь проект, привяжите к нему шаблон 1С-Битрикс и компоненты каталога, соберите карточку товара и каталог по общим правилам — и дизайн перестанет «гулять» от экрана к экрану. А если старый шаблон уже оброс разнородной версткой, аудит покажет, где сетка сломана и что стоит привести к порядку в первую очередь.
