Grid

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

Breakpoints​

Каждый breakpoints разрешения содержит собственное максимальное количество колонок:

ОбозначениеШирина от, pxШирина до, pxКол-во колонок
largeM1200-30
largeS960119924
mediumM78695918
mediumS56078512
smallS05596

Grid​

Row​

Блок с отрицательными отступами для размещения колонок (Col) по горизонтали. Блок нельзя вкладывать сам в себя, но можно чередовать далее по дереву с использованием Col. Стилизованный компонент, обладающий всеми свойствами div.

Col​

Примеры​

Базовое применение​

Размеры колонок указываются свойством size, отступ — свойством offset.

Live Editor

Result

Адаптивные размеры и отступы колонок​

Свойства size и offset могут быть адаптивными. Для этого добавьте соответствующие свойства с нужными breakpoints. При этом, size и offset могут выступать как fallback-значения для остальных разрешений.

Live Editor

Result

API​

Grid​

Col​