Как сделать сетку сайта: виды, расчет, настройка в Figma и применение в адаптивном дизайне

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

В статье разберем, что такое сетка сайта, какие бывают виды сеток в дизайне, как рассчитать колонки, gutter и отступы, настроить сетку в Figma и применить ее на десктопе, планшете и мобильном экране.

Что такое сетка сайта и как она работает

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

Такой каркас нужен не только дизайнеру. Разработчик по нему понимает контейнеры, столбцы, gutter и точки перестройки. Редактор видит, какой объем текста не разрушит композицию. Владелец сайта получает более устойчивый дизайн, который проще масштабировать.

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

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

Зачем нужна сетка в веб-дизайне

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

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

Когда элементы выровнены по колонкам и отступам, пользователь быстрее понимает, что главное. На первом экране заголовок может занимать 6–8 колонок, визуальный блок — оставшуюся часть, а CTA — находиться в зоне быстрого внимания.

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

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

Из чего состоит сетка сайта

Сеточная система включает несколько базовых элементов. Если понять их до работы в Figma, расчет параметров будет не интуитивным, а управляемым.

Контейнер не обязан совпадать с шириной экрана. Для десктопа часто используют 1140, 1200, 1280 или 1440 пикселей, но точное значение зависит от проекта. Для новостного сайта подойдет плотная колоночная сетка, а промостранице — более свободная композиция с крупными акцентами.

Колонки делят рабочую область на равные или разные части. Сетка из 12 колонок популярна потому, что ее удобно делить на 2, 3, 4 и 6 частей: 6+6, 8+4, 4+4+4, 3+3+3+3.

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

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

Виды сеток в дизайне сайтов

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

Блочная сетка

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

Колоночная сетка

Колоночная сетка — базовый инструмент для большинства сайтов. Ее используют в лендингах, интернет-магазинах, корпоративных страницах, SaaS-сервисах и медиа. Элемент может занимать 1, 2, 3, 4, 6 или 12 колонок.

Например, преимущества удобно собрать в три карточки по 4 колонки, тарифы — в четыре карточки по 3, а форму заявки — на 5–6 колонок, чтобы она не выглядела чрезмерно широкой.

Модульная сетка

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

Строчная, базовая и пиксельная разметка

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

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

Иерархическая, асимметричная и коллажная

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

Вложенные схемы

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

Как выбрать сетку для сайта

Выбор зависит от типа проекта, количества контента, визуального языка бренда и устройств, на которых сайт будут чаще открывать.

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

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

Как рассчитать сетку сайта

Расчет начинается с анализа будущей страницы: какие блоки будут на сайте, сколько текста и изображений нужно разместить, где появятся формы, карточки, таблицы, баннеры и навигация. После этого можно выбрать контейнер, количество колонок, gutter и поля.

Базовая формула

Ширина колонки = (ширина контейнера − сумма всех gutter) / количество колонок.

Если контейнер равен 1200 px, используется 12-колоночная сетка, а расстояние между колонками — 24 px, промежутков будет 11.

Сумма gutter: 11 × 24 = 264 px.
Оставшаяся ширина: 1200 − 264 = 936 px.
Ширина одной колонки: 936 / 12 = 78 px.

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

Единица отсчета и отступы

Многие интерфейсы строятся на кратности 4 или 8 px. Это удобно для кнопок, карточек, модальных окон, высоты строк и расстояний между секциями. Практичная шкала: 8, 16, 24, 32, 48, 64, 96 px.

Количество колонок по экранам

На мобильных экранах важны не только колонки, но и поля. Обычно контенту нужны отступы от краев, чтобы текст, кнопки и изображения не выглядели зажатыми. Часто используют 16–24 px, но итоговое значение зависит от размера экрана и характера интерфейса.

Как сделать сетку сайта в Figma

Сетка в Figma создается через Layout Grid. Она применяется к фрейму, поэтому сначала нужно выбрать правильный размер экрана: Desktop, Tablet или Mobile. Для качественного адаптива лучше сразу подготовить несколько фреймов.

Порядок настройки:

1. Создайте фрейм нужного размера.

2. Выделите его.

3. В правой панели откройте Layout Grid и нажмите «+».

4. Измените тип на Columns.

5. Настройте Count, Type, Width, Gutter и Margin.

6. При необходимости добавьте Rows.

7. Сохраните стиль для повторного использования на других страницах.

Чтобы сделать модульную сетку в Figma, совместите колонки и строки. Например, для каталога товаров можно использовать 12 колонками по ширине и строки под высоту карточек. Так проще выравнивать изображения, названия, цены и кнопки.

Плагины для Figma, готовые шаблоны сеток и онлайн-калькуляторы помогают ускорить настройку, но параметры все равно нужно проверять под конкретный проект.

Как использовать сетку для размещения элементов

Готовая разметка работает только тогда, когда элементы действительно выравниваются по ее правилам. Текст, изображения, карточки, формы и меню должны не просто «стоять красиво», а подчиняться общей логике.

Текстовый блок не обязан занимать все 12 колонок. Заголовок может располагаться на 6–8, абзац — на 5–7, а рядом остается место для изображения или формы. Это повышает читаемость и помогает выстроить визуальный акцент.

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

Карточки удобно раскладывать по простым схемам:

• 3 карточки по 4 колонки;

• 4 карточки по 3 колонки;

• 2 карточки по 6 колонок;

• 1 карточка на всю ширину в мобильной версии.

Формы лучше не растягивать без причины. Если в форме только имя, телефон и email, ширина на 5–6 колонок часто выглядит аккуратнее, чем блок на всю страницу. Кнопки и CTA стоит выравнивать так, чтобы они были заметны, но не выпадали из макета.

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

Адаптивная сетка сайта

Адаптивная сетка меняет количество колонок, ширину контейнера, поля, gutter и порядок блоков в зависимости от размера экрана. На десктопе секция может делиться 6+6, на планшете превращаться в 8 колонок, а на смартфоне выстраиваться в один вертикальный поток.

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

Есть три распространенных подхода:

• Fixed Grid — контейнер имеет заданную ширину и не растягивается бесконечно.

• Fluid Grid — колонки и контейнер изменяются пропорционально ширине экрана.

• Hybrid Grid — сочетает фиксированные ограничения и гибкое поведение.

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

Принципы построения модульной сетки

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

Второй принцип — вертикальный ритм. Расстояния между заголовками, абзацами, секциями и карточками должны быть связаны с общей шкалой. Например, внутри карточки можно использовать 16 и 24 px, между крупными секциями — 64 или 96 px.

Третий принцип — горизонтальный ритм. Колонки и промежутки помогают строить пропорции 50/50, ⅓ и ⅔, 25/75. Благодаря этому страница выглядит сбалансированной, даже если в ней много разных блоков.

Для командной работы такая система становится частью дизайн-системы вместе с цветами, типографикой, компонентами и правилами контента. Перед разработкой нужно передать параметры: контейнер, количество колонок, gutter, поля, breakpoints, поведение карточек и правила перестройки блоков.

Популярные варианты колоночных сеток

12-колоночная сетка — универсальный вариант для десктопа. Она подходит большинству сайтов, потому что легко делится на 6+6, 4+4+4, 3+3+3+3 и 8+4. Ее используют для лендингов, каталогов, корпоративных страниц и сложных интерфейсов.

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

4-колоночная сетка удобна для мобильных экранов. Например, карточка, которая на десктопе занимает 3 колонки из 12, на смартфоне может растянуться на всю ширину.

3-колоночная сетка подходит для преимуществ, услуг, подборок материалов и простых каталогов. Такой формат часто используют внутри отдельных секций, даже если вся страница построена на 12 колонках.

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

Примеры применения на сайте

На лендинге первый экран можно построить по схеме 6+6: слева заголовок, описание и CTA, справа — изображение или видео. Преимущества размещаются тремя карточками по 4 колонки, тарифы — четырьмя по 3, форма заявки — в центре на 6–8 колонок.

В интернет-магазине сетка помогает организовать фильтры, карточки товаров, баннеры, пагинацию и рекомендации. Например, фильтры занимают 3 колонки, каталог — 9, а товары внутри каталога выстроены по модульной системе.

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

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

Распространенные ошибки

Частая ошибка — строить сетку без готового контента. Если неизвестно, сколько будет текста, изображений и карточек, макет легко перестает совпадать с реальной страницей.

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

Третья ошибка — случайные отступы. Когда в одном макете встречаются 17, 23, 31 и 46 px без логики, интерфейс выглядит неряшливо. Лучше заранее выбрать шкалу размеров и интервалы.

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

Пятая — элементы попадают в gutter. Обычно блоки должны начинаться и заканчиваться по колонкам, а промежутки остаются пространством между ними. Исключения допустимы, если это осознанный визуальный прием.

Шестая — нет связи с версткой. Макет в Figma должен быть реалистичным для CSS Grid, Flexbox или выбранного фреймворка. Поэтому параметры контейнера, breakpoints и поведение блоков стоит согласовать до начала разработки.

Когда можно нарушать сетку

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

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

Иногда явная сетка становится элементом графического стиля: линии, модули и направляющие остаются видимыми. Такой прием подходит технологичным продуктам, архитектурным бюро, образовательным платформам и дизайн-студиям.

Инструменты для создания сетки сайта

Для большинства задач достаточно Figma: Layout Grid, направляющих, стилей и нескольких фреймов под разные экраны. Adobe Photoshop и Sketch тоже позволяют работать с направляющими, но для веб-интерфейсов Figma удобнее за счет компонентов и командной работы.

Плагины помогают быстрее создать сетку, рассчитать колонки, проверить адаптивный grid или подготовить шаблон. Онлайн-калькуляторы полезны для расчета ширины колонок, промежутков и полей. Bootstrap Grid и похожие системы помогают дизайнеру и разработчику говорить на одном языке.

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

Коротко о главном

Чтобы создать сетку сайта, действуйте по шагам:

1. Определите цель страницы и подготовьте контент.

2. Выберите тип: блочный, колоночный, модульный, иерархический или комбинированный.

3. Рассчитайте контейнер, количество колонок, gutter и поля.

4. Настройте вертикальный и горизонтальный ритм.

5. Создайте сетку в Figma через Layout Grid.

6. Проверьте десктоп, планшет и мобильный экран.

7. Передайте разработчику параметры контейнера, колонок, отступов и breakpoints.

Для большинства сайтов подойдет 12-колоночная сетка на десктопе, 8 или 6 колонок на планшете и 4 колонки на мобильных экранах. Но точные значения зависят от задачи. Хорошая система всегда строится под контент, сценарии пользователя, дизайн-концепцию и реальные ограничения верстки.