Инспектор компоновки Flexbox и Grid

Chrome DevTools помечает flex-контейнеры значком «flex» рядом с их узлом DOM на панели элементов. Нажатие на значок включает или выключает наложение Flexbox: цветные линии показывают главную и поперечную оси, границы элементов и интервалы.

Контейнеры Grid отображаются со значком «grid». Нажатие на него включает или выключает наложение сетки: цветные линии показывают столбцы, строки и интервалы. Постоянные наложения, закреплённые на панели компоновки, остаются видимыми при прокрутке или изменении размера области просмотра.

DevTools → Элементы → вкладка компоновки содержит список всех flex- и grid-контейнеров на странице. Нажатие на имя контейнера выбирает его в DOM и включает или выключает его наложение. Здесь можно настроить внешний вид наложения: цвет линий, видимость подписей и размеры треков.

При включённом параметре «Показывать размеры треков» наложение показывает имена и размеры треков. Внутренние размеры (auto, min-content, max-content) и дробные единицы (fr) отображаются в вычисленных значениях в пикселях, показывая, как единицы fr делят доступное пространство.

Выберите гибкий элемент (дочерний элемент гибкого контейнера). Панель «Стили» показывает развёрнутую форму сокращённой записи гибкости: увеличение, сжатие и базовый размер элемента. Наложение выделяет размер элемента по главной оси, его базовый размер, а также применённое увеличение или сжатие.

Для контейнеров сетки с grid-template-areas отображаются наложения именованных областей. Каждая именованная область имеет подпись и свой цвет. Благодаря такой визуализации легко проверить, соответствуют ли назначения областей сетки задуманному шаблону макета.

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

Неправильное положение элементов часто вызвано неверными значениями свойств выравнивания содержимого по главной оси, элементов по поперечной оси или самого элемента. Наложение гибкого макета и сетки показывает положение элементов относительно осевых линий. Попробуйте переключать свойства выравнивания в панели «Стили» и наблюдайте за изменениями наложения в реальном времени.

Наложение отображает промежутки между элементами в виде цветных полос. Благодаря этому легко проверить значения промежутков и определить, создаётся ли расстояние свойством промежутка (правильно) или внешним отступом (который в строках гибкого макета может неожиданно схлопываться).

Наложение сетки различает неявные треки (автоматически создаваемые для элементов, вышедших за пределы) и явные треки (заданные в шаблоне сетки). Неявные треки обозначаются пунктирными линиями. Если содержимое создаёт неожиданные неявные треки, наложение сразу показывает структуру переполнения.

Используйте инспектор макета вместе с режимом устройства. Изменяйте размер области просмотра и наблюдайте, как в реальном времени перестраиваются строки гибкого макета и треки сетки, создаваемые автоматическим заполнением или подгонкой. Это позволяет раньше обнаружить нарушения адаптивного макета, чем при ручном изменении размера окна браузера.

Что показывает наложение сетки в DevTools, чего не видно на отрисованной странице?

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