Сетка. Портфолио Громова Антона. Создание и разработка сайтов

Сетка

По умолчанию сетка имеет 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