Сеточная система и модульность

1) Зачем сетка

• ускоряет дизайн и разработку (общий язык: «12 колонок, gutter 24»),
• уменьшает когнитивную нагрузку (ровный ритм, стабильные линии),
• повышает переносимость компонентов между страницами,
• позволяет строить модульную библиотеку без «микроверстки».

2) Базовые элементы сетки

Контейнер — максимальная ширина контента, центрированная область.
Колонки — вертикальные области для размещения модулей.
Gutter — горизонтальный промежуток между колонками.
Margin — внешние поля слева/справа от контейнера.
Row/Track — горизонтальная направляющая (в CSS Grid — строки/треки).
Baseline — вертикальная сетка типографики.

Рекомендуемый вертикальный ритм: 8-pt (иногда 4-pt для нюансов), единицы размеров и отступов кратны 4/8.

3) Брейкпоинты и контейнеры

• Контейнер растровый (фикс. max-width) на больших экранах, fluid — на мобильных.
• Gutter может плавно увеличиваться к большим брейкпоинтам.
• Колонки — 4/6/8/12 как «основной набор».

4) Модульность и плотности

Модуль — блок контента, занимающий 1..N колонок и кратные baseline-высоты.

• Comfort (дашборды, чтение): крупнее шрифты, отступы 16–24.
• Compact (таблицы, профи-mode): шрифты +0/−1 px, вертикальные отступы −4/−8, высоты строк фиксированы (кратно 8).

Компоненты должны иметь два пресета плотности минимум.

5) Типографика и baseline-сетка

Выберите базовый line-height (например, 24 px) и синхронизируйте высоты элементов (кнопки 40/48/56 px кратны baseline).
Заголовки закрепляют вертикальные ритмы: отступы над/под кратны 8.
Иконки выравнивайте по капвысоте текста.

6) Шаблоны раскладок

6.1 Карточки (cards)

Сетка: мозаика (фикс. ширина карточки) или колоночная (карточка = N колонок).
Минимальные высоты контента, чтобы избежать «прыжков» при загрузке; skeleton в пределах карточки.
Внутренний padding: 16/20/24 в зависимости от брейкпоинта.

6.2 Таблицы

Контейнер на всю ширину; замораживаем первый столбец/шапку при горизонтальном скролле.
Ячейки — baseline-кратные; числовые колонки выравниваем по разрядам/десятичным.
На XS — «карточные строки» (stacked layout) вместо горизонтального скролла, если столбцов слишком много.

6.3 Формы

Одноколоночные на XS/SM, дву- или трехколоночные на MD+ (с учетом логики табов/секций).
Поле + лейбл + хелп-текст укладываются в общий модуль (высоты кратны 8).

6.4 Дашборды

Грид с фиксированными треками и облаками (areas) для стабильности.
Виджеты имеют минимальную и максимальную ширину в колонках; высоты — кратны baseline.
При ресайзе — меняется кол-во колонок, не дробим виджеты произвольно.

7) Адаптивность, auto-layout и поведение

Контент впереди сетки: сетка подстраивается под содержимое, а не ломает его.

• Используйте constraints (left/right/center) и auto-layout для карточек/списков.
• Поддерживайте варианты компонента для XS/SM/MD/LG (изменяются паддинги, порядок слотов).

• На уровне секций — CSS Grid (области, колонки, строки).
• Внутри компонентов — Flex (оси, баланс пробелов).

8) CSS Grid / Flex — практикум

css
.container {
max-width: 1280px; margin: 0 auto; padding: 0 16px;
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-4 { grid-column: span 4; }
@media (max-width: 1199px) {
.container { grid-template-columns: repeat(8, 1fr); gap: 20px; }
.col-4 {grid-column: span 8; }/full-width card/
}
@media (max-width: 839px) {
.container { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}
@media (max-width: 599px) {
.container { grid-template-columns: repeat(4, 1fr); }
}

css
.dashboard {
display: grid; gap: 24px;
grid-template:
"kpi kpi chart chart" auto
"tbl tbl chart chart" 1fr / 1fr 1fr 1fr 1fr;
}
.kpi  { grid-area: kpi; }
.chart { grid-area: chart; }
.tbl  { grid-area: tbl; }
@media (max-width: 1199px) {
.dashboard { grid-template:
"kpi" auto "chart" auto "tbl" 1fr / 1fr; }
}

9) Отступы и токены

Фиксируйте масштабы в дизайн-системе.

json
{
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32, "3xl": 48 },
"container": { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"gutter": { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"columns": { "xs": 4, "sm": 6, "md": 8, "lg": 12 }
}

• Внутренние отступы компонентов — из `space`.
• Наружные поля контейнеров — из `gutter`/`margin`.
• Высоты элементов — кратны 8 (40/48/56).

10) Модульные компоненты

• знать, сколько колонок он занимает на каждом брейкпоинте;
• иметь минимальные/максимальные размеры;
• не зависеть от «магических» пикселей — только токены;
• держать внутреннюю сетку (заголовок, контент, футер) на baseline.

11) Изображения и медиапропорции

Фиксируйте aspect-ratio (например, 16/9, 4/3, 1/1) для превью и карточек.

css
.media { aspect-ratio: 16 / 9; object-fit: cover; }

На XS используйте full-bleed (картинка по краям) только для промо, остальной контент следует контейнеру.
Текст на изображении — только на плашках/оверлеях, контраст ≥ AA.

12) RTL и локализация

Грид-направление зеркалится: `dir="rtl"` и `:dir(rtl)`-правила для отступов/иконок.
Порядок колонок и «липкие» области (frozen columns) в таблицах — учитывайте зеркалирование.
Длина строк и переносы могут менять высоты модулей — закладывайте запас.

13) Специфика iGaming

Промо-зоны и баннеры: отдельный грид с крупными модулями; текст всегда на плашке, контраст AAA для ответственных уведомлений (18+, лимиты, риски).
Лидеры/рейтинги: таблицы с фиксированной первой колонкой и sticky-шапкой, числа табличные (tabular-nums), высоты строк кратны 8.
Дашборды игроков/операций: виджеты (сессии, депозиты, RTP, Net Deposits) занимают 3–6 колонок на 12-гриде; перестроение каскадное на MD/SM.
Карточки турниров: сетка карточек 3×N (LG), 2×N (MD), 1×N (SM/XS); CTA в постоянном месте.

14) Доступность и фокус

Фокус-кольца не должны ломать ритм: добавляйте outline-offset или внутренний псевдоэлемент.
Минимальные размеры клика: 44×44 (моб.) / 32×32 (десктоп).
Не кодируйте смысл только размещением; сохраняйте текстовые метки и aria-атрибуты.

15) Производительность

Снижайте глубину вложенности гридов: 1 основной грид секции + флексы внутри.
Избегайте тяжелых теней/масок на сотнях карточек; используйте «плоские» стили в списках.
Ленивая загрузка медиаконтента; фиксированные пропорции предотвращают CLS.

16) Антипаттерны

«Сетка по вкусу» на каждой странице → рассыпается консистентность.
Gutter меняется произвольно по секциям.
Несогласованные плотности (в одном экране и «компакт», и «комфорт»).
Компоненты, зависящие от магических ширин (без колонок/токенов).
Таблицы с горизонтальным скроллом на мобайле без альтернативной раскладки.
Текст на изображении без плашек и контроля контраста.

17) QA-чек-лист

Структура

• Колонки/контейнер/маргины соответствуют брейкпоинтам.
• Gutter стабилен внутри страницы.
• Высоты и отступы кратны 8.

Компоненты

• Определены колоночные ширины (XS..XL) и min/max.
• Внутренние сетки согласованы с baseline.

Таблицы/формы

• Sticky-шапка/первая колонка; stacked-режим на XS.
• Поля форм кратны baseline; лейбл/хелп-текст не «прыгают».

A11y

• Фокус-стили не ломают ритм; кликовые зоны ≥ минимальных.

Перформанс

• Нет CLS из-за медиаблоков; ленивая загрузка включена.

18) Токены и документация в дизайн-системе

• значения `container`, `columns`, `gutter`, `space`, baseline;
• примеры раскладок (карточки/таблицы/формы/дашборды);
• пресеты плотности (Comfort/Compact) и их влияние на компоненты;
• код-сниппеты для CSS Grid/Flex и Figma-стили/лейауты.

Краткое резюме

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