ДРасположение блоков на этой странице регулируется глобальной модульной сеткой и, если она отключена (что хорошо для большинства проектов), блоки смещаются друг под друга.
Проектные блоки — те, что cозданы специально для этого проекта (по умолчанию их нет вовсе).
Исходные блоки — те, что есть в стартовом наборе блоков проекта (все они отключены по умолчанию).
Почти как в bootstrap 4.
Классы .container, .row, .col-[xs|sm|md|lg|xl|xxl]-[1 - @grid-columns]. См. глобальную сетку и примеси.
.col-[xxl]-[1 - @grid-columns] по умолчанию закомментированы.
.col-xs-12 .col-sm-4 .col-md-4 .col-lg-3
.col-xs-12 .col-sm-4 .col-md-4 .col-lg-3
.col-xs-12 .col-sm-4 .col-md-4 .col-lg-3
.col-xs-12 .col-sm-4 .col-md-4 .col-lg-3
.col-md-2
.col-lg-3
.col-md-10
.col-lg-9
Приоритетным является подход, в котором вместо упомянутых выше классов модульной сетки используются семантические БЭМ-овские классы и less-примеси (см. файл с примесями).
.block-name {
.row(); // БЭМ-блок — обёртка элементов модульной сетки
&__element {
// Разные ширины элемента на разных вьюпортах
.col(xs, 6);
.col(sm, 5);
.col(md, 4);
.col(lg, 3);
.col(xl, 2);
.col(xxl, 1);
}
}
111
.block-name {
// в примесь можно передать ширину промежутка между ячейками
.row(10px);
&__first-element {
// в примесь можно передать много данных
.col(xs, 6, @grid-columns, 10px);
}
}