Для генерации сетки в вашем scss файле должны быть следующие строки:
Данный код сгенерирует сетку из 12 колонок, с отступами между колонками 1rem для трех резрешений экранов:
С отступами между колонками
С отступами внутри колонок
Без отступов
То есть, для начала сетки - необходимо создать контейнер с нужным типом сетки. Внутри контейнера, на первом уровне должны находиться колонки с классом cell с заданным размером (для заданного экрана, в примере префикс s).
s-4 - означает, что данная колонка, начиная с самого маленького размера, будет занимать 4 колонки от доступной ширины.
s-8 - то же самое, только 8 колонок.
Иногда, между колонкам нужны отступы.
Для этого используем классы [префикс]-mleft-[число] и [префикс]-mright-[число]
s-mleft-3 - добавит отступ на 3 колонки слева
s-mright-3 - добавит отступ на 4 колонки справа
Если вам нужны колонки одинакового размера, можно использовать специальные классы для родительского контейнера:
s-size-4 — разделить всю область на 4 одинаковые колонки
Есть 2 спецальные колонки.
s-shrink — колонка займет минимально-доступное пространство
s-auto — колонка займет максимально-доступное пространство
Спецальные колонки можно комбинировать с обычными колонками.
По умолчанию, колонки выстраиваются начиная от левого края. Это можно поменять, добавив соответствующие классы к контейнеру с колонками:
s-start — выравнивание, начиная с левого края (это включено по умолчанию)
s-end — выравнивание, начиная с правого края
s-center — выравнивание по центру
s-between — выравнивание с одинаковыми отступами между колонками
По умолчанию колонки внутри одной строки имеют одинаковую высоту и занимают все доступное пространство. Выглядит это так:
Это можно изменить добавив специальне классы к колонкам:
s-full — колонка займет все доступное пространство
s-start — колонка прижмется к верхней части
s-middle — колонка будет стоять по центру
s-end — колонка прижмется к нижней части
Можно одновременно выстроить все колонки нужным нам образом добавив подобные классы к контейнеру:
Колонки можно сортировать независимо от того, в каком порядке они сверстаны. Данный механизм используется если на разных размерах экранов нам нужно отсортировать колонки в разном порядке.
Для этого используются классы: [префикс]-order-[номер]