Контентная колонка (—content-max: 1536px). Тексты, заголовки,
одиночные картинки остаются здесь — по центру, как в старом .container.
Боковые поля адаптивные: —gutter 16→48px.
.full-bleed — до краёв рамки (—section-max: 2560px).
На экранах шире 2560 не тянется дальше и центрируется.
Снова контентная колонка после full-bleed — ничего не сдвинулось.
.bleed-right — от левого края контента до правого края рамки (медиа-врезка).
.bleed-left — от левого края рамки до правого края контента.
Content-grid: как пользоваться
Обёртка .section-grid (пришла на замену .container) задаёт секцию во всю ширину
с центральной «контейнерной» колонкой. Прямые дети по умолчанию сидят в этой
колонке — поэтому тексты/заголовки не нужно ничем помечать. Классы-модификаторы
вырывают элемент шире:
| Класс | Поведение |
|---|---|
| (без класса) | центральная колонка, --content-max (1536px), адаптивные поля |
.full-bleed | во всю ширину рамки до --section-max (2560px); на ultrawide центрируется |
.bleed-right | от левого края контента до правого края рамки |
.bleed-left | от левого края рамки до правого края контента |
Токены — в astro-components/src/scss/base/theme.css, утилиты — в .../base/layer.css.
Реализовано на именованных grid-линиях (content / full), без width:100vw —
поэтому нет горизонтального скролла.
Разметка
<section>
<div class="section-grid">
<h2>Заголовок</h2> <!-- как контейнер -->
<p>Текст…</p> <!-- как контейнер -->
<div class="full-bleed"><Slider/></div> <!-- во всю ширину экрана -->
<img class="bleed-right" src="…" /> <!-- врезка до правого края -->
</div>
</section>PageLayout уже оборачивает контент в .section-grid, так что на страницах с этим
лейаутом достаточно добавить class="full-bleed" нужному элементу.