Сетка

Все классы сетки прописаны в отдельном файле grid.scss.

Сетка стандартная, 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
Все устройства
- Телефоны пейзаж и шире
- Планшеты портрет и шире
- Планшеты пейзаж и шире
- ноутбуки и шире
- широкоформатные мониторы
- Телевизоры

Примеры

.flex .row .wrap .box

.sgrid_9
.sgrid_3
.sgrid_8
.sgrid_4
.sgrid_7
.sgrid_5
.sgrid_6
.sgrid_6
.sgrid_5
.sgrid_7
.sgrid_4
.sgrid_8
.sgrid_3
.sgrid_9

.flex .row .wrap .box

.sgrid_2
.sgrid_2
.sgrid_4 .a--left

.flex .column .box

.sgrid_2
.sgrid_4
.sgrid_6

.flex .column--reverse .box

.sgrid_3
.sgrid_6
.sgrid_9