Принцип работы
Layout Grid сосредоточен на каркасе страницы: колонках, промежутках, внешних полях и их изменении при разных размерах окна просмотра. Он различает гибкие колонки, контейнеры с фиксированной максимальной шириной и адаптивные макеты, поэтому спецификация сетки может описывать поведение, а не только скриншот для десктопа.
Источник — компактное руководство, а не библиотека для реализации. Приведённые в нём типичные количества колонок и примеры брейкпоинтов — лишь отправные точки. Полезный результат — сетка, подобранная под контент, с чёткими указаниями для областей на всю ширину, текстовых секций в контейнере, боковых панелей и повторяющихся карточек.
Ожидаемые результаты
- Таблица брейкпоинтов с колонками, промежутками, полями и ограничениями контейнера.
- Правила макета для областей в контейнере, на всю ширину, боковых панелей и карточек.
- Заметки для разработчиков о том, как макет адаптируется между ширинами.
От задания к проверке
- 01Выберите тип сетки
Подбирайте колоночную, модульную, базовую или составную структуру под контент, а не считайте, что всем страницам нужна одна и та же сетка.
- 02Задайте поведение по ширине
Определите, где колонки растягиваются, где контейнер перестаёт расти и когда колонки или боковые панели сворачиваются.
- 03Проверьте промежуточные ширины
Проверяйте переходы около брейкпоинтов, а не только самые маленькие и самые большие эталонные экраны.