Grid

Для базового управления версткой на страницу используется система флексов. Данный подход позволяет гибко настроить вывод контента. И для удобной настройки посредством классов мы создали вспомогательные утилиты для сетки. Далее по порядку:

Класс .container

Данный класс используется для установки на странице контейнера. По сути ничем не отличается от привычного подхода к формированию таких элементов на странице. Автоматически центрируется в середине посредством отступов.

Чтобы его использовать, достаточно написать, например, следующее:

<section class="container">...</section>

Контент можно располагать и непосредственно внутри контейнера, это даст эффект обычного ограничения и центрирования. Не обязательно использовать строки и колонки. Их задача распложить контент по сетке.

Размеры

По умолчанию следующие, хотя их спокойно можно заменить и в конфигурации для собственной сборки.

	xs	sm	md	lg	xl
Максимальная ширина контейнера	100%	100%	1000px	1200px	1300px

B свойства колонок:

Свойство
Количество колонок	12
Количество колонок для грида	+2
Зазор (flex\grid-column) gap	2x $base-grid ~ 16px

Для чего нужен контейнер?

В основном для ограничения контента. На нашей практике чаще всего даже без сетки внутри. Поэтому базовый класс .container это просто флекс с максимальной шириной и центрированием внутри экрана. Впротивовес ему мы создали гридовый контейнер. Он немного сложнее для понимания, но в целом достаточно простой в реализации.

Строки

Мы отказались от классических строк, который были реализованы, как отдельные блоки, сейчас это дочерние элементы блока .container, т.е. .container__row. В случае если контейнер обычный, то строка просто наследует логику родителя, что позволяет размещать в ней колонки. Если же это гридовая строка, то с этим опять же, чуть сложнее.

Строки и колонки можно смешивать для достижения эффекта вложенности.

Модификаторы:

.container__row--grid — позволяет явно указывать сетку для строки. Таким образом можно внутри обычного контейнера получить необходую грид-строку. Количество колонок наследуется от глобальных настроек, т.е. 12.

Колонки

Колонки также стали частью блока и не могут существовать отдельно, они часть блока .container и указываются как .container__column. Могут существовать, как непосредственно внутри контейнера, так и располагаться внутри строк.

Без модификатора колонка занимает столько места, сколько ей отведено в рамках флексового контейнера. Чтобы указать конкретный размер, необходимо использовать модификатор .container__column--[1–12], или же с дополнительным медиазапросом .container__column--[xs–xl]-[1–12].

Пример с вложенностью и миксами.

<div
    class="container">
    <div class="container__column container__column--lg-6">
        <h1>Flex колонка</h1>
    </div>
    <div class="container__row container__column container__column--xs-12">
        <div
            class="container__column container__column--lg-2"></div>
        <div
            class="container__column container__column--lg-2"></div>
        <div
            class="container__column container__column--lg-6"></div>
    </div>
</div>

Размер колонки рассчитывается исходя из размера зазора (gap), и у них отсутствует возможность сдвига, как например если был бы модификатор .container__column--offset-3. Поддержку таких штук мы исключили в пользу разметки на гридах.

Строки и колонки можно смешивать для достижения эффекта вложенности.

Grid-контейнер.

Реализован в виде одного модификатора для блока .container → .container--grid, что в сущности меняет реализацию логики обычного контейнера. А именно:

Количество колонок возрастает на 2: это «уши» слева и справа. Размер ушей расситывается исходя из текущего максимального размера контейнера (в соответствии с медиазапросом) и расчет выглядит следующим образом размер занимаемой области - максимальный размер контейнера → с делением на 2. Расчет происходит с учетом gap-ами, поэтому содержимое внутри обычного контейнера и гридового начинается и заканчивается на одинаковых вертикалях (если не обнулять отступы обычного контейнера).
У гридового контейнера нет отстутов внутрь, они заменены на gap-ы.

Модификаторы колонок

Данные модификаторы будут работать корректно как внутри гридовой строки, так и в самом контейнере.

.container__column-[1–12] — Колонка с такими свойства займет столько фракций, сколько указано, при этом начнется с места, где она фактически распложена. Если это первый элемент, то от левого края, в остальных случаях со сдвигом, если хватит места, или будет перененеса на новую строку.
.container__column-[1–12]-span-[1–12] — Более жесткий метод указать позицию. Именно позицию, так как задается начало (в грид-ориентирах) и размер области. В случае нехватки свободного места перенесется на новую строку.

А для непосредственной вложенности в контейнер есть дополнительные модификаторы, это:

.container__column-0 и .container__column-13 — Они позволяют разместить контент в «ушах», которые находятся по бокам от контейнера. Работаю только, если вложить колонки непосредственно внутри контейнера.