Расположение блоков на этой странице регулируется глобальной модульной сеткой и, если она отключена (что хорошо для большинства проектов), блоки смещаются друг под друга.
Проектные блоки — те, что 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-md-offset-1 .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);
}
}
.block-name {
// в примесь можно передать ширину промежутка между ячейками
.row(10px);
&__first-element {
// в примесь можно передать много данных
.col(xs, 6, @grid-columns, 10px);
}
}