Section + Container
.yc-section — вертикальные отступы. .yc-container — max-width + горизонтальные padding'и.
.yc-section > .yc-container
Stack
Вертикальный flex с gap (--yc-stack-gap, default --space-4).
item 1
item 2
item 3
Cluster
Горизонтальный flex-wrap. Для группы кнопок, тегов, бейджей.
tag 1
tag 2
tag 3
tag 4
tag 5
tag 6
tag 7
tag 8
Split
Mobile: stacked. Desktop (≥768px): 2 колонки. Шаблон — --yc-split-template.
1fr
1fr
--yc-split-template: 1fr 2fr
1fr
2fr
Grid
Адаптивный grid через CSS-переменные. Никаких col-N — только --yc-grid-cols-{base|sm|md|lg|xl}.
2 / 3 / 4 (games grid)
item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
1 / 2 / 3 (tournaments)
item 1
item 2
item 3
item 4
item 5
item 6
1 / 1 / 2 (профиль / сайдбар)
item 1
item 2
«Разорванная» секция — full-width промо внутри container
Класс .yc-bleed — ребёнок выходит на 100vw, ломая container. Используется когда нужна промо-полоса/баннер в потоке статьи.
Контент перед промо (внутри container)
Промо во всю ширину
Этот блок ломает container и растягивается на весь viewport.
Продолжение section после промо (снова в container)
API
--yc-stack-gap, --yc-cluster-gap
--yc-split-gap, --yc-split-template
--yc-grid-gap
--yc-grid-cols-base | -sm | -md | -lg | -xl
.yc-bleed — full-width breakout (ребёнок выходит на 100vw)
--yc-split-gap, --yc-split-template
--yc-grid-gap
--yc-grid-cols-base | -sm | -md | -lg | -xl
.yc-bleed — full-width breakout (ребёнок выходит на 100vw)