Проверка сетки CSS
В этой статье описано, как определить сетки CSS на веб-сайте и отладить проблемы с макетом сетки с помощью настраиваемых наложений сетки.
Примеры, используемые в рисунках в этой статье, взяты из следующих веб-страниц:
Подготовка к работе
Сетка CSS — это эффективная парадигма макета для Интернета. Отличное место для начала изучения сетки CSS и многих функций — это руководство по макету сетки CSS в MDN.
Обнаружение таблиц CSS
Если HTML-элемент на странице имеет display: grid или display: inline-grid применяется к нему, grid рядом с ним отображается значок в инструменте Элементы :
Щелкните значок, чтобы переключить отображение наложения сетки на странице. Наложение появляется над элементом, расположенным в виде сетки для отображения положения линий сетки и дорожек:
Откройте область Макет . Если сетки включены на страницу, область Макет содержит раздел Сетка , содержащий ряд параметров для просмотра сетки.
Раздел Сетка в области Макет содержит следующие 2 подраздела:
- Параметры отображения наложения
- Наложения сетки
Параметры отображения наложения
На вкладке Макет в разделе Расширяемая сетка раздел Параметры отображения наложение содержит следующий пользовательский интерфейс.
Раскрывающийся список
Выберите один из следующих параметров в раскрывающемся списке:
| Параметр "Строка" | Сведения |
|---|---|
| Скрытие меток строк | Скрытие меток строк для каждого наложения сетки. |
| Отображение номеров строк | Отображение номеров строк для каждого наложения сетки (выбранное по умолчанию). |
| Отображение имен строк | Отображение имен строк для каждого наложения сетки при указании имен. |
В следующих разделах описаны команды раскрывающегося списка "Параметры отображения наложения ".
Скрытие меток строк
В раскрывающемся списке выберите Скрыть метки строк , чтобы скрыть метки строк для каждого наложения сетки.
Отображение номеров строк
В раскрывающемся списке выберите Показать номера строк , чтобы отобразить номера строк для каждого наложения сетки (по умолчанию).
По умолчанию положительные и отрицательные номера строк отображаются на наложении сетки.
Дополнительные сведения о отрицательных числах в наложении сетки см. в разделе Размещение на основе строк с помощью сетки CSS.
Отображение имен строк
В раскрывающемся списке выберите Показать имена строк , чтобы просмотреть имена строк вместо чисел. при указании имен отображаются имена строк для каждого наложения сетки. В этом примере 4 строки имеют имена: left, middle1, middle2и right.
Дополнительные сведения об именах строк в наложении сетки см. в разделе Макет с помощью именованных линий сетки.
Флажки
Установите любой из флажков в разделе Параметры отображения наложения :
| Вариант | Сведения |
|---|---|
| Отображение размеров дорожки | Отображение (или скрытие) размеров дорожек. |
| Отображение имен областей | Отображение (или скрытие) имен области при указании имен. |
| Расширение линий сетки | Отображает (или скрывает) расширения размеров сетки вдоль каждой оси. По умолчанию линии сетки отображаются только внутри элемента с заданным display: grid для него css или display: inline-grid . |
Эти флажки описаны в следующих разделах.
Отображение размеров дорожки
Установите флажок Показать размеры дорожки , чтобы просмотреть размеры треков сетки.
DevTools отображает [authored size] и [computed size] в каждой строке метки.
| Size | Сведения |
|---|---|
| Размер в авторе | Размер, определенный в таблице стилей (опущен, если не определен). |
| вычисленный размер | Фактический размер экрана. |
В демонстрации snack-box размеры столбцов определяются в grid-template-columns:1fr 2fr; CSS. Таким образом, метки строк столбцов отображают как созданные, так и вычисляемые размеры.
| Размер дорожки | Размер, созданный | Вычисленный размер |
|---|---|---|
| 1fr • 96,66 пикселей | 1fr | 96,66 пикселей |
| 2fr • 193,32 пикселей | 2fr | 193,32 пикселей |
В метках строк отображаются только вычисляемые размеры, так как в таблице стилей не определены размеры строк.
| Размер дорожки | Размер, созданный | Вычисленный размер |
|---|---|---|
| 80 пк | 80 пк | |
| 80 пк | 80 пк |
Отображение имен областей
Чтобы просмотреть имена областей, установите флажок Показать имена областей . В этом примере в сетке есть 3 области: верхняя, нижняя1 и нижняя2.
Расширение линий сетки
Установите флажок Расширить линии сетки , чтобы расширить линии сетки до края окна просмотра вдоль каждой оси.
Наложения сетки
Раздел Наложения сетки содержит список сеток, присутствующих на странице, каждая из которых имеет флажок, а также различные параметры.
Включение представлений наложения для нескольких сеток
Чтобы отобразить сетку наложения для нескольких сеток, установите флажок рядом с каждым именем сетки. В этом примере включены 2 наложения сетки, каждое из которых представлено разными цветами:
maindiv.snack-box
Настройка цвета наложения сетки
Чтобы открыть средство выбора цвета и настроить цвет наложения сетки, щелкните поле рядом с именем наложения сетки:
Выделение сетки
Чтобы выделить ЭЛЕМЕНТ HTML в инструменте Элементы и прокрутить его на веб-странице, щелкните значок Показать элемент на панели Элементы (
).
Примечание.
Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Jecelyn Yeen (разработчик, Chrome DevTools).
Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.