Несколько элементов начинаются или заканчиваются по одной невидимой линии.
Элементы стоят на рельсах
Даже свободный макет обычно держится на нескольких общих линиях. Когда заголовок, текст, кнопка и карточки используют разные случайные края, страница выглядит собранной из кусочков.
Контент делится на ограниченное число зон, а не получает новую ширину в каждом блоке.
Элемент может выйти за сетку ради акцента, но причина должна быть видна, а не похожа на ошибку.
Быстрая проверка: мысленно проведите вертикальные линии через края элементов. Если появляется много почти совпадающих осей, макет «плывет».
Сравните две страницы
В обеих есть те же элементы. Во второй они опираются на один левый край и равные колонки.
Создайте страницу с ИИ
Четыре коротких урока для уверенного старта.
Задача
Группы
Сетка
Сбой: почти одинаковые, но разные левые края и ширины.
Создайте страницу с ИИ
Четыре коротких урока для уверенного старта.
Задача
Группы
Сетка
Система: один контейнер, общий левый край, равные колонки и промежутки.
USWDS описывает сетку как систему контейнеров, строк и колонок для размещения и выравнивания контента.1 GOV.UK также строит страницы на строках и колонках и начинает мобильную компоновку с одной колонки.2
Найдите элемент вне сетки
Включите подсказку и определите, какой элемент нарушает общую конструкцию.
Сетка-подсказка
Четыре навыка для работы с ИИ
От задачи страницы до точной дизайнерской правки.
Начать модульИерархия
Группировка
Сетка
Что выбилось из общей оси?
Сетка меняется, порядок остается
На телефоне колонки часто складываются в одну. Это не отказ от сетки: общий край, последовательность и промежутки сохраняются.
Широкий экран
Основной контент 2/3
Дополнение 1/3
Две колонки с общими краями и промежутком между ними.
Узкий экран
Основной контент
Дополнение
Одна колонка, но тот же порядок и единый левый край.
Выберите точную правку
Карточки преимуществ имеют почти одинаковую ширину, а вторая сдвинута примерно на 12 px вправо. Как дать агенту проверяемое указание?
Наблюдаемый симптом
У трех карточек должны быть одинаковые колонки и левый край. Сейчас средняя карточка начинается правее двух остальных, из-за чего ряд выглядит сломанным.
Какая команда лучше?
Дайте задачу агенту
Попросите агента сначала назвать оси, а затем исправить только одно нарушение. Это защищает от полного случайного редизайна.
Проведи аудит только по выравниванию и сетке.
1. Назови основной контейнер и общие вертикальные оси страницы.
2. Найди элемент, чей край или ширина почти совпадает с системой, но случайно выбивается.
3. Укажи, по какому соседнему элементу или колонке его выровнять.
4. Исправь только это нарушение, не меняя текст, цвет, типографику и порядок блоков.
5. Проверь десктоп и мобильную версию: на мобильном колонки могут сложиться, но общий край должен сохраниться.Урок освоен, если вы можете
Ваш преподаватель - агент
Попросите агента наложить на ваш скриншот словесную сетку: перечислить контейнер, колонки и общие края. Сначала сравните его наблюдение со своим, потом разрешайте правку.
Первый модуль завершен
Теперь вы умеете определить задачу страницы, назначить порядок внимания, увидеть смысловые группы и проверить общую конструкцию. Следующий модуль посвящен визуальному языку: отступам, типографике, цвету и графике.