Инспектирование CSS Grid

Инспектирование CSS Grid

От автора: в этом руководстве показано, как определять сетки CSS на странице, инспектировать их и устранять проблемы с макетом в панели Элементы Chrome DevTools.

Откройте для себя CSS-сетки

Когда к HTML-элемент на странице применено display: grid или display: inline-grid, вы можете увидеть значок grid рядом с ним в панели Элементы.

Инспектирование CSS Grid

Щелкните значок, чтобы переключить отображение наложения сетки на странице. Поверх элемента появляется наложение в виде сетки, чтобы показать положение линий и треков сетки:

Инспектирование CSS Grid

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Откройте панель Макет. Когда на странице включены сетки, панель Макет включает раздел Сетка, содержащий ряд параметров для просмотра сеток.

Инспектирование CSS Grid

Параметры просмотра сетки

Раздел Сетка в панели Макет содержит 2 подраздела:

Настройки отображения наложения

Наложения сетки

Давайте подробно рассмотрим каждый из этих подразделов.

Настройки отображения наложения

Настройки отображения наложения состоят из 2 частей:

а. Выпадающее меню с параметрами:

Скрыть метки линий: скрыть метки линий для каждого наложения сетки.

Показать номера строк: отображение номеров строк для каждого наложения сетки (выбрано по умолчанию).

Показать имена линий: отображение имен линий для каждого наложения сетки в случае сеток с именами линий.

б. Чек-боксы с опциями:

Показать размеры треков: переключает отображение размеров треков.

Отображать имена областей: переключает отображение имен областей в случае сеток с именованными областями сетки.

Удлинение линий сетки: по умолчанию линии сетки отображаются только внутри элемента с display: grid или display: inline-grid; при включении этого параметра линии сетки доходят до края области просмотра вдоль каждой оси.

Рассмотрим эти настройки более подробно.

Показать номера строк

По умолчанию положительные и отрицательные номера строк отображаются в наложенной сетке.

Инспектирование CSS Grid

Скрыть метки линий

Выберите Скрыть метки линий, чтобы скрыть номера строк.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Инспектирование CSS Grid

Показать имена линий

Вы можете выбрать Показать имена линий, чтобы просматривать имена линий вместо номеров. В этом примере у нас есть 4 строки с именами: left, middle1, middle2 и right.

В этой демонстрации элемент orange располагается слева направо с помощью CSS grid-column: left / right. Отображение имен линий упрощает визуализацию начальной и конечной позиции элемента.

Инспектирование CSS Grid

Показать размеры треков

Установите флажок Показать размеры треков, чтобы просмотреть размеры треков в таблице.

DevTools будет отображать [authored size] — [computed size] в каждой строке: Указанный размер: размер, определенный в таблице стилей (опускается, если не определен). Рассчитанный размер: фактический размер на экране.

В этой демонстрации размеры колонок snack-box определены в CSS grid-template-columns:1fr 2fr;. Таким образом, метки линий колонок показывают как указанные, так и вычисленные размеры: 1fr — 96,66 пикселей и 2fr — 193,32 пикселей.

Метки строк рядов показывают только вычисленные размеры: 80 пикселей и 80 пикселей, так как в таблице стилей не определены размеры рядов.

Инспектирование CSS Grid

Показать имена областей

Чтобы просмотреть имена областей, установите флажок Показать имена областей. В этом примере есть 3 области сетки — top, bottom1 и bottom2.

Инспектирование CSS Grid

Продлить линии сетки

Установите флажок Продлить линии сетки, чтобы удлинить линии сетки до края области просмотра по каждой оси.

Инспектирование CSS Grid

Наложения сетки

Раздел Наложения сетки содержит список сеток, присутствующих на странице, каждая с чек-боксом с различными параметрами.

Включить отображение наложения нескольких сеток

Вы можете включить отображение наложения нескольких сеток. В этом примере есть наложение 2 сеток — main и div.snack-box, каждая из которых представлена различными цветами.

Инспектирование CSS Grid

Настроить цвет наложения сетки

Вы можете настроить цвет наложения каждой сетки, щелкнув палитру цветов.

Инспектирование CSS Grid

Выделить сетку

Щелкните значок выделения, чтобы сразу выделить элемент HTML, прокрутите до него на странице и выберите его в панели Элементы.

Инспектирование CSS Grid

Автор: Jecelyn Yeen

Источник: developers.google.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.