Сетка для дизайна
Ширина контейнера (px)
1280
По-умолчанию задана максимальная ширина контейнера 1280px.
Отступы контейнера (%)
7
Ширина контейнера 86% (отступы по 7% от ширины окна).
Отступы колонок (px)
12
Отступы у колонок 0.75rem - это примерно 12px при общем размере шрифта 16px.
Имитация размера окна (l, m, s) F11
100
Колонки меняются в зависимости от ширины окна браузера small, middle (min-width: 601px) и large (min-width: 993px)
Ряд №1
s12
s12 m4 l2
s6 m4 l8
s6 m4 l2
Ряд №2
s12 m6 l3
s12 m6 l3
s12 m6 l3
s12 m6 l3
s12 m12 l6
s12 m12 l6
Ряд №3
s3 m2 l1
s3 m2 l1
s3 m2 l1
s3 m2 l1
s3 m2 l1
s3 m2 l1
s3 m2 l1
s3 m2 l1
s3 m2 l1
s3 m2 l1
s3 m2 l1
s3 m2 l1
s4 m3 l2
s4 m3 l2
s4 m3 l2
s4 m3 l2
s4 m3 l2
s4 m3 l2
s5 m6 l3
s5 m4 l3
s2 m4 l3
s12 m4 l3
s12 m6 l4
s12 m6 l4
s12 m6 l4
s12 m6 l5
s12 m6 l5
s12 l2
Ряд №4. Пример сайдбара
Левый
s12 m4 l3
s12 m8 l9
Правый
s12 m4 l4
s12 m8 l8
Ряд №5. Сетка в сетке
s12 m4 l3
s12 m6 l4
s12 m6 l4
s12 m6 l4
s12 m6 l4
s12 m6 l4
s12 m6 l4
s12 m12 l6
s12 m12 l6
Для чего нужна модульная сетка?
Cетка в веб-дизайне является основой, которая не только улучшит юзабилити сайта, но и существенно упростит верстку будущего проекта.
Веб-дизайн многое наследовал от полиграфического дизайна. Это и принципы работы со шрифтами, и правила композиции, и модули. Сайты-визитки и сайты-презентации вполне могут довольствоваться одноколоночной структурой, домашние страницы — двухколоночной, более сложные проекты должны, соответственно, иметь более сложный и продуманный макет.
Современный адаптивный дизайн нельзя представить без колонок, которые динамически меняются и подстраиваются под ширину в зависимости от устройства пользователя.