Сетка и колонки

Flex grid

Row распределяет двенадцать долей между колонками

• .rowFlex-контейнер с переносом и системным gutter текущего breakpoint.
• .row-bleedУбирает внешний отрицательный отступ строки, но сохраняет промежутки между колонками. Используйте внутри card, modal, drawer и scrollable-контейнеров.
• .colРавномерно занимает доступное место.
• .col-autoПодстраивает ширину под содержимое.
• .col-1…12Занимает указанное число долей из двенадцати.

<div class="row g-4">
  <div class="col-12 col-md-4">Фильтры</div>
  <div class="col-12 col-md-8">Результаты</div>
</div>

Gutters and offset

Интервалы и смещение остаются частью контракта

• .g-*Одновременно задаёт горизонтальный и вертикальный gutter.
• .gx-*Меняет только горизонтальный gutter.
• .gy-*Меняет только вертикальный gutter.
• .offset-0…11Сдвигает колонку вправо на указанное число долей.

Доступные gutter-значения: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12. Все три группы и offset поддерживают breakpoint в середине имени: gx-lg-6, offset-md-2.

Native CSS Grid

Grid управляет колонками, span и автоматическим заполнением

• .grid / .grid-inlineВключает grid или inline-grid.
• .grid-cols-1…12Создаёт равные колонки.
• .grid-span-1…12Задаёт число занимаемых колонок.
• .grid-start-1…12Задаёт начальную линию элемента.
• .grid-flow-row / .grid-flow-columnУправляет направлением автоматического размещения.
• .grid-auto-fit / .grid-auto-fillСоздаёт адаптивные колонки с базовым минимумом 240 px.

Для auto-fit и auto-fill доступны минимумы 160, 200, 240, 280, 320, например grid-auto-fit-200. Gap использует тот же набор значений через grid-gap-*.

<section class="grid grid-auto-fit-240 grid-gap-6">
  <article>Карточка</article>
  <article>Карточка</article>
</section>

Mobile first

Breakpoint указывается перед значением

Поддерживаются sm 576, md 768, lg 1024, xl 1280 и xxl 1440. Базовый класс действует всегда, responsive-класс — начиная со своей ширины.

Пример: col-12 col-md-6 col-lg-4. Порядок элементов в DOM должен оставаться логичным без визуальной сетки.