Сетка
По умолчанию сетка имеет 12 колон и 6 брейкпоинов. Построена на CSS flexbox
Классы сетки
| Размер | Префикс | Пример | Ширина экрана | Устройство |
|---|---|---|---|---|
| Класс по умолчанию | sgrid_12 | Любая ширина | Все устройства | |
| Small | sm | sm_sgrid_12 | от 480px | Телефоны пейзаж и шире |
| Medium | md | md_sgrid_12 | от 768px | Планшеты портрет и шире |
| Large | lg | lg_sgrid_12 | от 1024px | Планшеты пейзаж и шире |
| Xlarge | xl | xl_sgrid_12 | от 1366px | ноутбуки и шире |
| XXL | xxl | xxl_sgrid_12 | от 1681px | широкоформатные мониторы |
| Retina | re | re_sgrid_12 | от 1921px | Ретина и телевизоры |
| Все | Small от 480px | Medium от 768px | Large от 1024px | Xlarge от 1366px | XXlarge от 1681px | Retina от 1921px | |
|---|---|---|---|---|---|---|---|
| Все устройства | |||||||
| - | Телефоны пейзаж и шире | ||||||
| - | Планшеты портрет и шире | ||||||
| - | Планшеты пейзаж и шире | ||||||
| - | ноутбуки и шире | ||||||
| - | широкоформатные мониторы | ||||||
| - | Телевизоры | ||||||
Расширение и кастомизация
Брейкпоинты можно добавлять/удалять/изменять. Делается это в файле variables.scss, в переменной $breakpoints.
Можно задать любое колличество колонок для любого брейкпоинта. Так же можно задать несколько колок для одного брейкпоинта. Например, при ширине экрана 1920px можно создать один контейнер с 12 колонками (по умолчанию), а другой с 5, 7, 10...
Подробнее о расширении и кастомизации в описании variables.scss