Skip to main content

Grid

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

Storybook

Брейкпоинты#

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

deviceScale = 2#

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

ПоверхностьОбозначениеШирина от, пиксШирина до, пиксКол-во колонок
SberBox Full HDXL1920-12
SberBox HDL153819188
SberPortalM112015366
OtherS011184

deviceScale = 1#

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

ПоверхностьОбозначениеШирина от, пиксШирина до, пиксКол-во колонок
DesktopXL960-12
Tablet (landscape)L7699598
Tablet (portrait)M5607686
MobileS05594

Container#

Row#

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

Col#

Примеры#

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

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

Live Editor
Result

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

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

Live Editor
Result

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

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

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

Live Editor
Result