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

Что такое модульная сетка простыми словами

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

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

Зачем это владельцу бизнеса:

1. Страница читается легче. Глаз цепляется за ровные края, и человек быстрее находит цену, кнопку, телефон.
2. Сайт проще менять. Новый блок встаёт на место без перерисовки соседних.
3. Мобильная версия собирается по правилам. Карточки, которые на компьютере стоят по три в ряд, на телефоне аккуратно встают в столбик.
4. Дизайнер и разработчик говорят на одном языке. «Карточка на 4 колонки» понятнее, чем «примерно треть ширины».

Из чего состоит сетка: колонки, гаттеры, поля и контейнер

Пара пояснений.

Контейнер нужен, чтобы на широком мониторе строки текста не растягивались на два метра. Если контейнер 1200 px, а экран 1920 px, по бокам остаются пустые поля, а контент стоит по центру.

Гаттер не даёт текстам двух соседних карточек слипаться. Блок, который занимает несколько колонок, включает и гаттеры между ними. Карточка на 4 колонки — это четыре колонки и три промежутка внутри.

Контрольные точки, или брейкпоинты, — ширины, на которых раскладка перестраивается. Например, в популярной библиотеке вёрстки Bootstrap это 576, 768, 992, 1200 и 1400 px (документация Bootstrap). Ваш сайт не обязан использовать именно эти цифры, но набор из 4–5 точек — обычная практика.

Почему 12 колонок, а не 10 или 16

Число 12 делится на 2, 3, 4 и 6. Поэтому в одной сетке можно собрать:

• текст и картинку пополам — по 6 колонок;
• три карточки услуг — по 4 колонки;
• четыре преимущества — по 3 колонки;
• текст на 8 колонок и боковую форму на 4.

У 10 колонок нет деления на три, а блок «три тарифа рядом» встречается на коммерческих сайтах постоянно. 16 колонок дают больше гибкости, но их сложнее держать в голове и легко запутаться. Для лендинга и сайта услуг 12 колонок хватает почти всегда.

На планшете и телефоне колонок меньше, потому что экран уже. Схема 12/8/4 описана, например, в руководстве Material Design по адаптивной сетке: телефон — 4 колонки, планшет — 8, большой экран — 12.

Как рассчитать сетку для сайта: пример на трёх экранах

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

Формула ширины колонки одна для всех экранов:

Колонка = (ширина контента − гаттер × (число колонок − 1)) / число колонок

Теперь раскладываем блок «три услуги»:

• на компьютере — три карточки по 4 колонки: 4 × 78 + 3 × 24 = 384 px каждая;
• на планшете — две карточки по 4 колонки в ряд, третья переносится вниз и растягивается на все 8 колонок или тоже занимает 4;
• на телефоне — каждая карточка на все 4 колонки, одна под другой.

Так же считаются отступы по вертикали. Удобно взять шаг 8 px и пользоваться только кратными значениями: 8 — между подписью и полем, 16 — между абзацами, 24–32 — между элементами карточки, 64–96 — между крупными блоками страницы. Когда отступы взяты из одного ряда, страница выглядит собранной даже без сложного дизайна.

Как настроить сетку в Фигме

В Фигме сетка задаётся на фрейме. С мая 2025 года функция называется не «layout grid», а «layout guide» (справка Figma).

1. Создайте фрейм нужной ширины: 1440, 768 или 360 px.
2. Выделите фрейм и в правой панели в разделе Layout guide нажмите «+». По умолчанию появится квадратная сетка.
3. Смените тип на колонки (Columns).
4. Укажите количество: 12, 8 или 4.
5. Выберите тип Stretch, если сетка тянется на всю ширину с полями, или Center, если нужна фиксированная ширина колонок по центру, как у контейнера.
6. Задайте поля (Margin) и промежуток (Gutter) из своего расчёта.
7. Включайте и выключайте отображение сеток сочетанием Shift + G.

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

Сетка в Тильде: стандартные блоки и Zero Block

В Тильде два способа собирать страницы, и сетка в них работает по-разному.

Стандартные блоки уже выровнены по колоночной сетке. В настройках многих блоков ширина и сдвиг контента задаются в колонках: например, текст шириной 8 колонок со сдвигом на 2. Адаптив для телефона блоки делают сами, поэтому ошибиться сложнее. Главное — не смешивать на одной странице блоки с разной шириной контента без причины.

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

В Zero Block по умолчанию пять ширин экрана, от 320 до 1200 px и выше. На каждой из них элементы нужно проверить отдельно: то, что ровно стоит на 1200, может уехать на 980. Когда Zero Block оправдан, а когда стандартные блоки лучше, мы подробно разбирали в статье про Zero Block в Тильде.

Частые ошибки, из-за которых макет разваливается на телефоне

Большинство из этого не видно, если смотреть сайт только на компьютере. Проверьте страницу на нескольких ширинах: как это сделать без специальных программ, рассказано в статье как проверить мобильную версию сайта. Общие принципы перестроения страницы под разные экраны — в материале про адаптивную вёрстку.

Как проверить, что сайт сделан по сетке

Если сайт уже есть и вы не уверены, держится ли он на сетке, это можно проверить за 10 минут.

1. Посмотрите на левые края. Заголовки, тексты, картинки и кнопки разных блоков должны начинаться на одной вертикали. Если каждый блок начинается в своём месте, сетки нет.
2. Сравните одинаковые элементы. Карточки услуг, отзывов, тарифов должны быть одной ширины и с одинаковыми промежутками.
3. Сузьте окно браузера. Плавно уменьшайте ширину и смотрите, перестраиваются ли блоки аккуратно или наезжают друг на друга.
4. Включите сетку поверх страницы. В браузерных расширениях для дизайнеров есть наложение колонок. Если элементы стоят мимо колонок, это сразу видно.
5. Измерьте отступы между блоками. Если они 37, 52, 81 и 44 px, системы нет.

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

Условный пример: что даёт переделка по сетке

Цифры условные, для иллюстрации.

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

Что сделали:

• задали сетку 12/8/4 колонки и контейнер 1200 px;
• привязали все карточки к 4 колонкам на компьютере и ко всей ширине на телефоне;
• убрали лишние отступы и привели все промежутки к ряду 16, 32, 64;
• кнопку сделали на всю ширину контента на телефоне.

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

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