Сіткова система та модульність

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, оформіть токени і шаблони розкладок, забезпечте варіанти щільності, адаптивність і доступність. Тоді сторінки масштабуються передбачувано, компоненти повторно використовуються, а команда працює швидше і стабільніше.