# Сетка
Сетка(grid) - это самый часто используемый механизм в разработке интерфейсов. В силу своей гибкости применение можно ему найти в любом месте приложении. И ее стоит применять в этом месте.
В Dermis сетка способна менять свои характеристики в очень большом диапазоне, что делает ее крайне гибкой.
Важно понимать!
Использование сетки оправдано только в случаях когда сложность блока не велика и стандартного функционала сетки достаточно для покрытия 100% его поведения.
В случае когда нужно более сложное выравнивание элементов в блоке - сильная модификация сетки не желательна, так как скорее усложнит разработку, чем упростит ее.
# Составные части
Базовый префикс($GRID_PREFIX) сетки: g-.
Сетка делится на 3 базовый блока и один вспомогательный:
row- Строка.Контейнер относительно которого и строится сетка. Управляет ячейками задавая межячеечные отступы, выравнивая ячейки, располагая ячейки.
cell- Ячейка.Блок распределения контента.
cols- Колонка(и).Блок, который управляет размерами любого элемента(чаще ячейки) в рамках заданного количества занимаемым им колонок.
container- Контейнер.Вспомогательный элемент, который создает фиксированного размера область для работы сетки.
Применяется при наличии сетки внутри, или без оной. Основная цель - ограничение контента по ширине. Также защищает страницу от образования горизонтального скролла в случаях использования сетки на максимальную ширину контента.
# Отзывчивость
Механизм отзывчивости - стандартен. Постфиксы с указанием breakpoint'а вида: -md, -sm и так далее.
Используется для модификаторов:
- Размера отступов между ячейками/строками:
.g-row--space_{size} - Количества колонок занимаемого элементом:
.g-cols--{size} - Размера отступов контейнера:
.g-container--space_{size} - Размера контейнера:
.g-container--fit_{size}
# Применение
По умолчанию она делится на 12 колонок $grid-cols-columns-count:
# Межячеечное расстояние
Бывает: none, xs, sm, md, lg, xl.
# Автоматические колонки
Также есть автоматические колонки, которые способны занимать максимальное и минимальное доступное пространство:
# Смещение
Вне зависимости от того заполнена-ли колонка или нет - она все также будет занимать причитающееся ей пространство, что можно использовать для расстановки пустого пространства вокруг нужных блоков:
# Выравнивание
WARNING
Механизм выравнивания делает сетку "слишком" гибким инструментом. Имея такой молоток абсолютно все элементы вдруг начинают казаться гвоздями. Поэтому используйте его с осторожностью и пониманием.
По умолчанию выравнивание включено. Но его можно выключить. Для этого измените $GRID_SHOULD_ALIGN флаг в false значение - и модификаторы выравнивания не будут генерироваться, что уменьшит исходный код.
Все модификаторы выравнивания - адаптивны.
Легко выравнивать ячейки вертикально: .g-row--align_
Выравнивание работает и для отдельных ячеек: .g-cell--align_
Горизонтальное выравнивание: .g-row--justify_, .g-cell--justify_
Вертикальное выравнивание контента: .g-row--content_
# Inline
Также сетка может работать как inline элемент, занимая только требуемое пространство: