LEGRID — демонстрация работы

Переменные

Переменная	Описание	Значение
@columns	Количество колонок	12
Ширина отступов между колонок
@gutterWidthMobile	Мобильники и выше	10px
@gutterWidth	Планшеты и выше	20px
@gutterWidthDesktop	Десктоп и выше	30px
@gutterWidthLargeDesktop	Большой десткоп	40px
Break-Points. Точки перехода между размерами сетки.
@screenPhone	Телефоны	480px
@screenTablet	Планшеты	768px
@screenDesktop	Мелкие десктопы и планшеты в горизонтальной ориентации	992px
@screenLarge	Большие десктопы	1280px

Основные классы

.container — контейнер для блоков c классом .content, имеет 100% ширину. Можно неограниченно вкладывать один контейнер в другой.

.content — контейнер для колонок, выравнивает контент по центру, для разных разрешений имеет разную ширину, настраиваемую в less файле.

.col - базовый класс, для любой колонки сетки.

.col-mb-X — мобильники и выше.

.col-X — планшеты и выше.

.col-dt-X — десктопы и выше.

.col-ld-X — большие десктопы.

где X - число от 1 до значения, заданного в @columns (по умолчанию 12)

Простой пример сетки, перестраивающейся в зависимости от девайса

Переключайте размер кнопками и всё станет понятно.

Можно кликнуть по ячейке сетки, тогда она подсветится и будет проще за ней следить.

Пример смещения колонок

.col-mb-left-X — смещение вправо на X колонок для мобильников и выше.

.col-left-X — смещение вправо на X колонок для планшетов и выше.

.col-dt-left-X — смещение вправо на X колонок для десктопов и выше.

.col-ld-left-X — смещение вправо на X колонок для больших десктопов.

где X - число от 1 до значения, заданного в @columns.

На примере ниже показано, как можно сместить одиночную колонку. Колонка специально смещена без соблюдения "шага" сетки для наглядности.

Колонки с автоматической шириной

.col-mb-auto — колонка автоматической ширины для мобильников и выше.

.col-auto — колонка автоматической ширины для планшетов и выше.

.col-dt-auto — колонка автоматической ширины для десктопов и выше.

.col-ld-auto — колонка автоматической ширины для больших десктопов.

Так же для установки минимальной ширины колонки можно использовать следующие классы:

.col-mb-min-X — минимальная ширина колонки для мобильников и выше.

.col-min-X — минимальная ширина колонки для планшетов и выше.

.col-dt-min-X — минимальная ширина колонки для десктопов и выше.

.col-ld-min-X — минимальная ширина колонки для больших десктопов.

где X - число от 1 до значения, заданного в @columns.

На примере ниже показано, как для верхней группы можно сделать 7 колонок для десктопов, а на планшете и мобильнике скрыть седьмую колонку и задать "фиксированные" размеры.
Для нижней группы добавлены классы, задающие минимальную ширину колонок для десктопов, а последняя колонка не скрывается на мобильниках и планшетах.

Вложенные сетки

Несмотря на то, что сетка поддерживает неограниченную вложенность — не стоит этим злоупотреблять.

Выравнивание ячеек

Для горизонтального выравнивания следует дописывать к блоку с классом .content следующие классы:

.col-all-start — выравнивание по левому краю для всех устройств.

.col-all-center — выравнивание по центру для всех устройств.

.col-all-right — выравнивание по правому краю для всех устройств.

.col-mb-start — выравнивание по левому краю для мобильников.

.col-mb-center — выравнивание по центру для мобильников.

.col-mb-right — выравнивание по правому краю для мобильников.

.col-start — выравнивание по левому краю для планшетов.

.col-center — выравнивание по центру для планшетов.

.col-right — выравнивание по правому краю для планшетов.

.col-dt-start — выравнивание по левому краю для десктопов.

.col-dt-center — выравнивание по центру для десктопов.

.col-dt-right — выравнивание по правому краю для десктопов.

.col-ld-start — выравнивание по левому краю для больших десктопов.

.col-ld-center — выравнивание по центру для больших десктопов.

.col-ld-right — выравнивание по правому краю для больших десктопов.

Для вертикального выравнивания следует дописывать к блоку с классом .content следующие классы:

.col-all-top — выравнивание по верхнему краю для всех устройств.

.col-all-middle — выравнивание по середине для всех устройств.

.col-all-bottom — выравнивание по нижнему краю для всех устройств.

.col-mb-top — выравнивание по верхнему краю для мобильников.

.col-mb-middle — выравнивание по середине для мобильников.

.col-mb-bottom — выравнивание по нижнему краю для мобильников.

.col-top — выравнивание по верхнему краю для планшетов.

.col-middle — выравнивание по середине для планшетов.

.col-bottom — выравнивание по нижнему краю для планшетов.

.col-dt-top — выравнивание по верхнему краю для десктопов.

.col-dt-middle — выравнивание по середине для десктопов.

.col-dt-bottom — выравнивание по нижнему краю для десктопов.

.col-ld-top — выравнивание по верхнему краю для больших десктопов.

.col-ld-middle — выравнивание по середине для больших десктопов.

.col-ld-bottom — выравнивание по нижнему краю для больших десктопов.

На примере показан комплексный вариант выравнивания.

Распределение свободного места

Для распределения свободного места между ячейками следует дописывать к блоку с классом .content следующие классы:

.col-all-between — сободное место между соседними ячейками для всех устройств.

.col-mb-between — сободное место между соседними ячейками для мобильников.

.col-between — сободное место между соседними ячейками для планшетов.

.col-dt-between — сободное место между соседними ячейками для десктопов.

.col-ld-between — сободное место между соседними ячейками для больших десктопов.

.col-all-around — сободное место вокруг соседних ячейкеек для всех устройств.

.col-mb-around — сободное место вокруг соседних ячейкеек для мобильников.

.col-around — сободное место вокруг соседних ячейкеек для планшетов.

.col-dt-around — сободное место вокруг соседних ячейкеек для десктопов.

.col-ld-around — сободное место вокруг соседних ячейкеек для больших десктопов.

На примере верхний блок имеет класс .col-all-between, средний блок выравнивается по центру, а нижний имеет класс .col-all-around

Вспомогательные классы сетки

Показ/скрытие элементов только на определённых экранах

.col-mb-hide .mb-hide — скрытие элемента на мобильниках.

.col-hide .tablet-hide — скрытие элемента на планшетах.

.col-dt-hide .dt-hide — скрытие элемента на десктопах.

.col-ld-hide .ld-hide — скрытие элемента на больших десктопах.

.col-mb-block .mb-block — показ элемента на мобильниках.

.col-block .tablet-block — показ элемента на планшетах.

.col-dt-block .dt-block — показ элемента на десктопах.

.col-ld-block .ld-block — показ элемента на больших десктопах.

Отступы

.col-padding-top — padding сверху, равный расстоянию между колонками.

.col-padding — padding сверху и снизу, равный расстоянию между колонками.

.col-padding-bottom — padding снизу, равный расстоянию между колонками.

.col-margin-top — margin сверху, равный расстоянию между колонками.

.col-margin — margin сверху и снизу, равный расстоянию между колонками.

.col-margin-bottom — margin снизу, равный расстоянию между колонками.

На примере показаны варианты примненения вспомогательных классов.

Обратный порядок вывода

Для вывода ячеек в обратном порядке следует дописывать к блоку с классом .content класс .reverse

Изменение порядка

Для изменения порядка вывода ячеек следует использовать следующие классы:

.col-all-first — вывести в блок начало для всех устройств.

.col-mb-first — вывести в блок начало для мобильников.

.col-first — вывести в блок начало для планшетов.

.col-dt-first — вывести в блок начало для десктопов.

.col-ld-first — вывести в блок начало для больших десктопов.

.col-all-last — вывести в блок конец для всех устройств.

.col-mb-last — вывести в блок конец для мобильников.

.col-last — вывести в блок конец для планшетов.

.col-dt-last — вывести в блок конец для десктопов.

.col-ld-last — вывести в блок конец для больших десктопов.