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

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

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

• Отображение наложения сетки на отображаемой веб-странице
• Выравнивание элементов сетки и их содержимого: всплывающее окно редактора сетки
• Параметры просмотра сетки
• Параметры отображения наложения
  • Отображение номеров строк
  • Скрытие меток строк
  • Отображение имен строк
  • Отображение размеров дорожки
  • Отображение имен областей
  • Расширение линий сетки
• Наложения сетки
  • Включение представлений наложения для нескольких сеток
  • Настройка цвета наложения сетки
  • Выделение элемента сетки на веб-странице и дереве DOM
• См. также

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

Сетка 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 .

См. также:

• Макет с использованием именованных линий сетки в MDN.

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

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

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

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.

См. также:

• grid-template-columns в MDN.
• grid-template-rows в MDN.

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

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

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

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

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

   

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

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

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

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

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

   

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

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

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

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

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

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

   

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

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

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

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

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

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

   

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

См. также:

• Изменение цветов с помощью справочника по выбору цветов в css features.

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

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

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

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

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

   

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

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

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

См. также

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

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

MDN:

• Макет сетки CSS
  • Макет сетки с использованием размещения на основе строк
  • Макет с использованием именованных линий сетки
• grid-template-columns
• grid-template-rows

Примечание.

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

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