Grid
Набор компонентов для создания сетки.
Storybook
Брейкпоинты
Каждый брейкпоинт разрешения содержит собственное максимальное количество колонок:
| Обозначение | Ширина от, пикс | Ширина до, пикс | Кол-во колонок |
|---|---|---|---|
| largeM | 1200 | - | 30 |
| largeS | 960 | 1199 | 24 |
| mediumM | 786 | 959 | 18 |
| mediumS | 560 | 785 | 12 |
| smallS | 0 | 559 | 6 |
Container
Row
Блок с отрицательными отступами для размещения колонок (Col) по горизонтали.
Блок нельзя вкладывать сам в себя, но можно чередовать далее по дереву с использованием Col.
Стилизованный компонент, обладающий всеми свойствами div.
Col
Примеры
Базовое применение
Размеры колонок указываются свойством size, отступ — свойством offset.
Адаптивные размеры и отступы колонок
Свойства size и offset могут быть адаптивными.
Для этого добавьте соответствующие свойства с нужными брейкпоинтами.
При этом, size и offset могут выступать как fallback-значения для остальных разрешений.