Модуль пространства помогает определить строгие правила для расчета размеров и отступов, а сетка помогает упорядочить сформированный на их основе контент в структурированные для восприятия блоки. Мы используем сетку из 12, 8 и 4 столбцов, поскольку она позволяет разделить выбранную область на половину, трети и четверти.

§Анатомия сетки

Столбцы ➊ определяют границы для горизонтального выравнивания, промежутки ➋ обеспечивают отступы между столбцами сетки, а внешние поля ➌ обеспечивают отступы и выравнивание контейнера ➍ по центру. Ширина столбцов сетки определяется с использованием процентного значения, а шаг промежутка по умолчанию всегда равен фиксированному значению в 20 px.

§Контейнер

Контейнер — это фундаментальный структурный элемент дизайн-системы, который содержит и выравнивает контент в пределах заданной области просмотра. Мы используем два вида контейнеров: Fixed с постоянной шириной (что означает, что его фиксированный max-width может изменяться на каждом брейк-поинте) и Fluid с плавающей шириной, который всегда будет занимать 100% доступного пространства (кроме размеров S, XS и 2XS).

§Брейк-поинты

Контрольные точки медиа запросов или брейк-поинты — это предопределенные области просмотра с заданной шириной, которые позволяют управлять различными настройками сетки.

§Области исключения

В макете пользовательского интерфейса пользователи ожидают найти определенные типы контента в определенных областях. Мы называем эти области областями исключения, и к ним не применяется сетка. Когда гибкие или навигационные панели расширяются, они либо уплотняют контент и сетку, либо выталкивают контент за пределы браузера. Нависающие панели накладываться поверх содержимого, не влияя на основной контейнер.