Grid

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

Storybook

Брейкпоинты

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

deviceScale = 2

Устройства с данным размером типографики: SberBox, SberBox Top, SberPortal и SberTV.

Поверхность	Обозначение	Ширина от, пикс	Ширина до, пикс	Кол-во колонок
SberBox Full HD	XL	1920	-	12
SberBox HD	L	1538	1918	8
SberPortal	M	1120	1536	6
Other	S	0	1118	4

deviceScale = 1

Данный размер типографики используют приложения SaluteApp.

Поверхность	Обозначение	Ширина от, пикс	Ширина до, пикс	Кол-во колонок
Desktop	XL	960	-	12
Tablet (landscape)	L	769	959	8
Tablet (portrait)	M	560	768	6
Mobile	S	0	559	4

Container

Row

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

Col

Примеры

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

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

Live Editor

Result

Open in CodeSandbox

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

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

Live Editor

Result

Open in CodeSandbox

Вычисляемая ширина колонок

Если ширина родителя больше ширины контейнера (например карусель) и невозможно использовать колонки с относительными значениями ширины, добавьте свойство type со значением "calc" в колонку.

Важно учитывать, что выше по древу DOM (лучше всего – в корне приложения) должен быть размещен компонент DeviceThemeProvider.

Live Editor

Result

Open in CodeSandbox