Поделиться через

Проверка макетов сетки CSS

Используйте вкладку Макет в инструменте Элементы , чтобы определить сетки CSS на веб-сайте и отладить проблемы с макетом сетки с помощью настраиваемых наложений сетки.

Подробное содержимое:

Отображение наложения сетки на отображаемой веб-странице

Сетка CSS — это эффективная парадигма макета для Интернета. Хорошей веб-страницей, чтобы узнать о сетке CSS и ее функциях, является макет сетки CSS в MDN.

Чтобы использовать наложение сетки на отображаемой веб-странице, выполните следующие действия:

  1. В новом окне или вкладке перейдите на страницу, на которую используется макет сетки CSS, например демонстрационную страницу Проверка макетов сетки CSS .

  2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

    Откроется devTools с выбранным инструментом "Элементы" с деревом DOM.

  3. В дереве DOM развернитеосновнойтекст>.

    Элементы <div> имеют значок сетки :

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

    Если html-элемент на веб-странице имеет display: grid или display: inline-grid к нему применяется, рядом с элементом в дереве DOM в инструменте Элементы отображается значок сетки.

  4. Щелкните значок сетки рядом с элементом, например <div class="fruit-box">:

    Выбранный значок сетки

    Наложение сетки отображается над элементом на отображаемой веб-странице. Значок сетки изменяется с синего текста на белом фоне на белый текст на синем фоне.

    На отображаемой веб-странице наложение сетки CSS отображается на слое перед элементом веб-страницы. Наложение сетки CSS показывает положение линий сетки (строк и столбцов) и дорожек.

    Если щелкнуть значок сетки несколько раз, он включается и отключается.

    Аналогичным образом иногда имеется значок подсети . Вы можете переключить наложение сетки GSS на подсети, щелкнув значок подсети . См. раздел Subgrid at MDN.

  5. Перейдите на вкладку Макет , которая сгруппирована с вкладкой Стили в инструменте Элементы :

    Вкладка

    Вкладка Макет содержит раздел Сетка и полосы сетки, который включает в себя:

    • Раскрывающийся список.
    • Флажки для параметров отображения.
    • Флажок для каждого элемента, использующего макет сетки CSS.

    Если на веб-странице используется сетка CSS, вкладка Макет содержит раздел Сетка и полосы сетки . Используйте раздел Сетка и полосы сетки , чтобы настроить, какие сведения будут отображаться в наложениях сетки на отрисоченной веб-странице.

Выравнивание элементов сетки и их содержимого: всплывающее окно редактора сетки

Вы можете выровнять элементы сетки CSS и их содержимое, просто нажав кнопку (чтобы открыть всплывающее окно редактора сетки), а не напрямую определять правила CSS.

Выравнивание элементов сетки CSS и их содержимого:

  1. Выполните действия, описанные выше в разделе Отображение наложения сетки на отрисовке веб-страницы.

    В результате выбрана вкладка Макет для элемента в дереве DOM (например <div class="fruit-box">, ), имеющего значок сетки .

  2. Перейдите на вкладку Стили .

  3. Найдите правило CSS с кнопкой Открыть редактор сетки.fruit-box, например правило:

    Кнопка

  4. В правиле CSS рядом с display: gridэлементом нажмите кнопку Открыть редактор сетки .

    Откроется всплывающее окно редактора сетки :

    Всплывающее окно редактора сетки

    Всплывающее окно редактора сетки содержит четыре набора кнопок в качестве параметров:

    • выравнивание содержимого
    • justify-content
    • Выравнивание элементов
    • justify-items

    В каждом наборе кнопок кнопки являются взаимоисключающими кнопками параметров. Если щелкнуть кнопку параметра дважды, кнопка параметра не будет выбрана в этом наборе, и значение возвращается в нормальное состояние.

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

    Цвет переднего плана кнопки меняется с черного на синий, а значение — с обычного на выбранное.

    Элементы сетки и содержимое повторно отображаются в окне просмотра.

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

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

Подробные сведения приведены ниже.

Параметры отображения наложения

В области Макетэлемента в разделе Расширяемая сетка и полосы сетки есть подраздел Параметры отображения наложение:

Подраздел

Подраздел Параметры отображения наложения состоит из двух частей:

  • Раскрывающийся список со следующими командами:

  • Флажки:

    • Отображение размеров дорожки — переключатель для отображения или скрытия размеров дорожки.
    • Показывать имена областей . Переключение, чтобы отобразить или скрыть имена областей, в случае с сетками с именоваными областями сетки.
    • Расширение линий сетки . По умолчанию линии сетки отображаются только внутри элемента, для которого есть display: grid или display: inline-grid задано. При включении этого параметра линии сетки распространяются до края окна просмотра вдоль каждой оси.

Подробные сведения приведены ниже.

Отображение номеров строк

Можно отобразить или скрыть номера строк (строк и столбцов) в наложении сетки на отображаемой веб-странице. В сетке CSS номера строк используются для определения вертикальных и горизонтальных линий, разделяющих строки и столбцы сетки CSS. Эти номера строк не относятся к строкам кода в исходном HTML-файле.

Чтобы отобразить или скрыть номера строк (строк и столбцов) в наложении сетки:

  1. Выполните действия, описанные выше в разделе Отображение наложения сетки на отрисовке веб-страницы.

  2. В подразделе >> Параметры отображения сетки и полосы сетки раздел Наложение показать раскрывающийся список Метки строк выберите Показать номера строк. Этот параметр выбран по умолчанию.

    Отображаются номера строк (строк и столбцов) для каждого наложения сетки:

    Отображение номеров строк

По умолчанию положительные и отрицательные номера строк (строки и столбцы) отображаются на наложении сетки. Сведения о отрицательных числах в наложении сетки см. в разделе Обратный подсчет в макете сетки с использованием размещения на основе строк в MDN.

Скрытие меток строк

Чтобы скрыть метки строк в наложении сетки, выполните следующие действия:

  1. Выполните действия, описанные выше в разделе Отображение наложения сетки на отрисовке веб-страницы.

  2. В подразделе > Параметры отображения сетки и полосы сетки в разделе >Наложение показать раскрывающийся список меток строк выберите Скрыть метки строк:

    Скрытие меток строк

    Метки строк (строк или столбцов) скрыты на каждом наложении сетки.

Отображение имен строк

В наложении сетки на отображаемой веб-странице можно отобразить имена строк. Это упрощает визуализацию начального и конечного положения элемента.

Чтобы отобразить имена строк в наложении сетки, выполните следующие действия:

  1. Выполните действия, описанные выше в разделе Отображение наложения сетки на отрисовке веб-страницы.

  2. В подразделе > Параметры отображения сетки и полосы сетки в подразделе> Показать раскрывающийся список Метки строк выберите Показать имена строк:

    Отображение имен строк

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

    В приведенном выше примере 4 строки имеют имена: left, middle1, middle2и right.

    В демонстрации элемент Orange охватывает слева направо с помощью grid-column: left правил CSS и grid-column: right .

См. также:

Отображение размеров дорожки

В наложении сетки на отображаемой веб-странице можно отобразить размеры отслеживания.

Чтобы отобразить размеры треков в наложении сетки, выполните следующие действия:

  1. Выполните действия, описанные выше в разделе Отображение наложения сетки на отрисовке веб-страницы.

  2. На вкладке Макет инструмента Элементы в разделе Сетка / Полосы сетки в подразделе Сетка / Полосы сетки установите флажки для каждого элемента, на котором будет отображаться наложение сетки. Например, установите флажок рядом с div.fruit-box и div.snack-box.

  3. В подразделе Параметры отображения сетки и полосы сетки>наложение установите флажок Показать размеры дорожки :

    Отображение размеров дорожки

Каждая метка строки отображает authored size (если она определена в CSS) и computed size:

Размер Сведения
authored size Размер, определенный в таблице стилей CSS. Опущено из метки, если не определено.
computed size Фактический размер экрана.

В демонстрации размеры столбцов определяются следующим образом в свойстве grid-template-columnsCSS :

.fruit-box {
  display: grid;
  grid-template-columns: [left] 1fr [middle1] 1fr [middle2] 1fr [right];
  ...
}

.snack-box {
  display: grid;
  grid-template-columns: 1fr 2fr;
  ...
}

Метки столбцов:

В столбцах сетки для элемента <div class="snack-box">демонстрации отображаются следующие метки строк размера дорожки:

Размер дорожки Размер, созданный Вычисленный размер
1fr • 96,66 пикселей 1fr 96,66 пикселей
2fr • 193,34 пикселей 2fr 193,34 пикселей

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

Метка строки для каждого столбца сетки отображает authored size в дополнение к computed size, так как размеры столбцов были созданы (указаны) в свойстве grid-template-columns CSS таблицы стилей CSS.

Метки строк:

В строках сетки отображаются следующие метки строк размера дорожки для элемента <div class="snack-box">демонстрации :

Размер дорожки Размер, созданный Вычисленный размер
80 пк н/д 80 пк
80 пк н/д 80 пк

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

Метка строки в каждой authored sizeстроке сетки не отображает , только computed size, так как размеры строк не были созданы (указаны) в свойстве grid-template-rows CSS в таблице стилей CSS.

См. также:

Отображение имен областей

В наложении сетки на отображаемой веб-странице можно отобразить имена областей, например верхний, нижний1 и нижний2.

Чтобы отобразить имена областей, выполните приведенные далее действия.

  1. Выполните действия, описанные выше в разделе Отображение наложения сетки на отрисовке веб-страницы.

  2. В подразделе Параметры отображения сетки и полосы сетки в разделе >Наложение установите флажок Показать имена областей :

    Отображение имен областей

Расширение линий сетки

Линии сетки наложения сетки можно расширить до края окна просмотра вдоль каждой оси.

Чтобы расширить линии сетки, выполните следующие действия:

  1. Выполните действия, описанные выше в разделе Отображение наложения сетки на отрисовке веб-страницы.

  2. В подразделе Параметры отображения сетки и полосы сетки в разделе >Наложение установите флажок Расширить линии сетки :

    Расширение линий сетки

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

На вкладке Макет инструмента Элементы (сгруппированные с вкладкой Стили) раздел Сетка / Сетка перемечений содержит список элементов, имеющих сетку CSS. У каждой сетки есть флажок, а также различные параметры.

Подраздел

Включение представлений наложения для нескольких сеток

Чтобы включить представления наложения для нескольких сеток, выполните приведенные ниже действия.

  1. Выполните действия, описанные выше в разделе Отображение наложения сетки на отрисовке веб-страницы.

  2. В подразделе Сетка / Полосы сетки раздел >Наложения сетки / Полосы сетки установите флажок рядом с каждым именем нескольких сеток:

    Включение представлений наложения для нескольких сеток

    Наложение сетки CSS отображается для каждого выбранного элемента, имеющего сетку CSS. В приведенном выше примере включены три наложения сетки. Каждая сетка CSS имеет свой цвет на отображаемой веб-странице:

    • body — наложение золотой сетки.
    • div.fruit-box — наложение розовой сетки.
    • div.snack-box — наложение синей сетки.

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

Чтобы настроить цвет наложения сетки, выполните следующие действия:

  1. Выполните действия, описанные выше в разделе Отображение наложения сетки на отрисовке веб-страницы.

  2. В подразделе Сетка / Полосы сетки в подразделе >Сетка / Наложения сетки щелкните поле Выберите цвет наложения для этого элемента рядом с именем элемента:

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

    Откроется средство выбора цвета.

См. также:

Выделение элемента сетки на веб-странице и дереве DOM

Для любого элемента с макетом сетки CSS можно автоматически прокрутить элемент на отображаемой веб-странице и автоматически выбрать элемент в дереве DOM.

Чтобы прокрутить страницу до элемента с использованием сетки и выбрать элемент в дереве DOM:

  1. Выполните действия, описанные выше в разделе Отображение наложения сетки на отрисовке веб-страницы.

  2. В подразделе Сетка / Полосы сетки в подразделе >Сетка / Наложения сетки нажмите кнопку Показать элемент на панели Элементы (Показать элемент на значке панели элементов) рядом с именем элемента:

    Выделение сетки на отображаемой веб-странице

    • Отображаемая веб-страница прокручивается до элемента, использующего макет сетки CSS, и элемент кратко выделяется на отображаемой веб-странице.

    • В инструменте Элементы дерево DOM автоматически прокручивается до элемента и элемент выбирается.

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

См. также

Демонстрационные веб-страницы:

MDN:

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Jecelyn Yeen.

Creative Commons License Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.

  • Last updated on