Figma: https://www.figma.com/file/3d3CsJ3OJQDW0dsdtoCEDZ/Templates?node-id=1%3A546

Сетка отвечает за выравнивание и разбивку содержимого внутри контентной части. Есть два варианта использования сетки.

Пропорциональная сетка

Этот тип сетки следует использовать для того, чтобы разбить контентное содержимое в секции на равные части.

Достаточно указать только количество секций в строке и расстояние между колонками. Все прямые «дети» такой секции сами подстроятся по указанным правилам.

Для каждого брейкпоинта можно указывать своё значение модификатора ratio, но это не обязательно.

Помните, что все адаптивные правила перестроения и изменения свойств наследуются от меньшего брейкпоинта к большему.

Переменные брейкпоинтов хранятся в модификаторе темы breakpoint и соответствуют префиксам в сетках.

{
  block: 'tpl-grid',
  mods: { 's-ratio': '1-1', 'm-ratio': '1-1-1', 'l-ratio': '1-1-1-1', 'col-gap': 'third', 'row-gap': 'third' }
  content: [
    {
      elem: 'fraction',
      content: [...]
    },
    {
      elem: 'fraction',
      content: [...]
    },
    {
      elem: 'fraction',
      content: [...]
    },
    {
      elem: 'fraction',
      content: [...]
    }
  ]
}

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

Колоночная сетка

Этот тип сетки следует использовать для того, чтобы разбить контентное содержимое на части имеющих разную пропорцию. Чтобы описать колоночную сетку нужно указать допустимое количество columns , а в значениях каждому элементу fraction нужно указать сколько колонок он займёт. Колоночная сетка хорошо подходит, если внутренние блоки разной ширины или высоты.

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

В колоночной сетке элементы fraction имеют модификаторы на ширину в колонках col и опциональный на высоту в строках row.

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

Элемент fraction