Inspecionar layouts de grade CSS

Use a guia Layout na ferramenta Elementos para identificar grades CSS em um site e depurar problemas de layout de grade usando sobreposições de grade personalizáveis.

Conteúdo detalhado:

• Exibir a sobreposição de grade em uma página da Web renderizada
• Alinhar itens de grade e seu conteúdo: o pop-up do editor de grade
• Opções de visualização em grade
• Configurações de exibição de sobreposição
  • Mostrar números de linha
  • Ocultar rótulos de linha
  • Mostrar nomes de linha
  • Mostrar tamanhos das faixas
  • Mostrar nomes de áreas
  • Estender linhas de grade
• Sobreposições de grade
  • Habilitar exibições de sobreposição de várias grades
  • Personalizar a cor da sobreposição da grade
  • Realçar o elemento de grade na página da Web e na árvore DOM
• Confira também

Exibir a sobreposição de grade em uma página da Web renderizada

O CSS Grid é um poderoso paradigma de layout para a Web. Uma boa página da web para aprender sobre o CSS Grid e seus recursos é o layout do CSS grid no MDN.

Para usar a sobreposição de grade em uma página da Web renderizada:

1. Vá para uma página que usa o layout de Grade CSS, como a página de demonstração Inspecionar layouts de Grade CSS , em uma nova janela ou guia.

2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

   O DevTools é aberto, com a ferramenta Elementos selecionada, mostrando a árvore DOM.

3. Na árvore DOM, expanda body>main.

   Os <div> elementos têm um emblema de grade :

   

   Quando um elemento HTML na página da Web é display: grid aplicado a display: inline-grid ele, um emblema de grade é exibido ao lado do elemento na árvore DOM na ferramenta Elementos .

4. Clique no emblema de grade ao lado de um elemento, como <div class="fruit-box">:

   

   Uma sobreposição de grade é exibida sobre o elemento na página da Web renderizada. O selo de grade muda de texto azul em fundo branco para texto branco em fundo azul.

   Na página da web renderizada, a sobreposição de Grade CSS aparece em uma camada na frente do elemento da página da web. A sobreposição de grade CSS mostra a posição das linhas de grade (linhas e colunas) e trilhas.

   Se você clicar no selo de grade várias vezes, ele ligará e desligará.

   Da mesma forma, às vezes há um selo de subgrade . Você pode alternar a sobreposição do GSS Grid em uma subgrade clicando no selo da subgrade . Veja Subgrid no MDN.

5. Clique na guia Layout , agrupada com a guia Estilos na ferramenta Elementos :

   

   A guia Layout inclui uma seção Grade / Grid Lanes , que inclui:

   • Uma lista suspensa.
   • Caixas de seleção para opções de exibição.
   • Uma caixa de seleção para cada elemento que usa o layout de Grade CSS.

   Quando uma página da Web usa uma grade CSS, a guia Layout inclui a seção Grade / Raias de Grade . Use a seção Grade/Grid Lanes para configurar quais informações serão exibidas em sobreposições de grade na página da Web renderizada.

Alinhar itens de grade e seu conteúdo: o pop-up do editor de grade

Você pode alinhar itens de grade CSS e seu conteúdo apenas clicando em um botão (para abrir o pop-up do editor de grade), em vez de ter que definir diretamente as regras CSS.

Para alinhar itens de grade CSS e seu conteúdo:

1. Execute as etapas em Exibir a sobreposição de grade em uma página da Web renderizada, acima.

   Como resultado, a guia Layout é selecionada para um elemento na árvore DOM (como <div class="fruit-box">) que tem um emblema de grade .

2. Selecione a guia Estilos .

3. Encontre uma regra CSS que tenha o botão Editor de grade aberta , como a .fruit-box regra:

   

4. Na regra CSS, ao lado display: gridde , clique no botão Abrir editor de grade .

   O pop-up do editor de grade é aberto:

   

   O pop-up do editor de grade contém quatro conjuntos de botões como opções:

   • alinhar conteúdo
   • justify-content
   • alinhar itens
   • justify-items

   Dentro de cada conjunto de botões, os botões são botões de opção mutuamente exclusivos. Se você clicar em um botão de opção duas vezes, nenhum botão de opção será selecionado nesse conjunto e o valor retornará ao normal.

5. No pop-up do editor de grade , em qualquer conjunto de botões, clique em um botão. Para voltar ao normal, clique duas vezes em um botão.

   A cor do primeiro plano do botão muda de preto para azul e o valor muda de normal para o valor selecionado.

   Os itens de grade e o conteúdo são renderizados novamente na viewport.

Opções de visualização em grade

A seção Grade/Pistas de grade no painel Layout contém duas subseções:

• Configurações de exibição de sobreposição
• Sobreposições de grade

Os detalhes estão abaixo.

Configurações de exibição de sobreposição

No painel Layout da ferramenta Elemento, na seção Grade expansível / Pistas de grade, há uma subseção Configurações de exibição de sobreposição:

A subseção Configurações de exibição de sobreposição consiste em duas partes:

• Uma lista suspensa contendo os seguintes comandos:

  • Ocultar rótulos de linha - Oculte os rótulos de linha para cada sobreposição de grade.
  • Mostrar números de linha - Mostra os números de linha para cada sobreposição de grade (selecionada por padrão).
  • Mostrar nomes de linha - Mostra os nomes de linha para cada sobreposição de grade no caso de grades com nomes de linha.

• Caixas de seleção:

  • Mostrar tamanhos das faixas - Alterne para mostrar ou ocultar os tamanhos das faixas.
  • Mostrar nomes de área - Alterne para mostrar ou ocultar nomes de área, no caso de grades com áreas de grade nomeadas.
  • Estender linhas de grade - Por padrão, as linhas de grade são mostradas apenas dentro do elemento que possui display: grid ou display: inline-grid definido nela. Quando você ativa essa opção, as linhas de grade se estendem até a borda da viewport ao longo de cada eixo.

Os detalhes estão abaixo.

Mostrar números de linha

Você pode mostrar ou ocultar números de linhas (linhas e colunas) na sobreposição de grade na página da Web renderizada. No CSS Grid, os números de linha são usados para identificar as linhas verticais e horizontais que separam linhas e colunas de uma grade CSS. Esses números de linha não são para as linhas de código no arquivo de origem HTML.

Para mostrar ou ocultar números de linhas (linhas e colunas) na sobreposição de grade:

1. Execute as etapas em Exibir a sobreposição de grade em uma página da Web renderizada, acima.

2. Na seção >Grade / Grid Lanes Subseção >Sobrepor configurações de exibiçãoMostrar lista suspensa de rótulos de linha, selecione Mostrar números de linha. Essa opção é selecionada por padrão.

   Os números das linhas (linhas e colunas) para cada sobreposição de grade são exibidos:

   

Por padrão, os números de linha positivos e negativos (linhas e colunas) são exibidos na sobreposição da grade. Para obter informações sobre números negativos na sobreposição de grade, consulte Contagem regressiva no layout da grade usando o posicionamento baseado em linha no MDN.

Ocultar rótulos de linha

Para ocultar rótulos de linha na sobreposição de grade:

1. Execute as etapas em Exibir a sobreposição de grade em uma página da Web renderizada, acima.

2. Na seção >Grade / Grid Lanes Subseção >Sobrepor configurações de exibiçãoMostrar lista suspensa de rótulos de linha, selecione Ocultar rótulos de linha:

   

   Os rótulos das linhas (linhas/colunas) ficam ocultos em cada sobreposição de grade.

Mostrar nomes de linha

Na sobreposição de grade na página da Web renderizada, você pode mostrar nomes de linhas. Isso facilita a visualização da posição inicial e final de um elemento.

Para mostrar nomes de linha na sobreposição de grade:

1. Execute as etapas em Exibir a sobreposição de grade em uma página da Web renderizada, acima.

2. Na seção >Grade / Grid Lanes Subseção >Sobrepor configurações de exibiçãoMostrar lista suspensa de rótulos de linha, selecione Mostrar nomes de linha:

   

   Nomes de linha em vez de números são exibidos. Essa opção exibe os nomes das linhas para cada sobreposição de grade, se os nomes forem fornecidos.

   No exemplo acima, 4 linhas têm nomes: left, middle1, middle2e right.

   Na demonstração, o elemento Orange se estende da esquerda para a direita, por meio grid-column: left de regras e grid-column: right CSS.

Veja também:

• Layout usando linhas de grade nomeadas no MDN.

Mostrar tamanhos das faixas

Na sobreposição de grade na página da Web renderizada, você pode mostrar os tamanhos das faixas.

Para mostrar os tamanhos das faixas na sobreposição de grade:

1. Execute as etapas em Exibir a sobreposição de grade em uma página da Web renderizada, acima.

2. Na guia Layout da ferramenta Elementos, na seção Raias de Grade/Grade, na subseção Sobreposições de Raias de Grade/Grade, marque a caixa de seleção de cada elemento no qual mostrará a sobreposição de grade. Por exemplo, marque a caixa de seleção ao lado de div.fruit-box e div.snack-box.

3. Na subseção Configurações de exibição de sobreposição da seção >Grid / Grid Lanes, marque a caixa de seleção Mostrar tamanhos de pista:

   

Cada rótulo de linha mostra o authored size (se definido no CSS) e o computed size:

Na demonstração, os tamanhos das colunas são definidos da seguinte forma, na propriedade 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;
  ...
}

Rótulos de coluna:

Os seguintes rótulos de linha de tamanho de trilha são exibidos nas colunas da grade, para o elemento <div class="snack-box">da demonstração:

Se a tela do computador estiver definida para uma densidade de pixels diferente, a demonstração poderá produzir valores diferentes, como metade dos pixels.

O rótulo de linha em cada coluna de grade exibe o authored size além de , porque os computed sizetamanhos de coluna foram criados (especificados), na propriedade grid-template-columns CSS na folha de estilo CSS.

Rótulos de linha:

Os seguintes rótulos de linha de tamanho de trilha são exibidos nas linhas de grade, para o elemento <div class="snack-box">da demonstração:

Se a tela do computador estiver definida para uma densidade de pixels diferente, a demonstração poderá produzir valores diferentes, como metade dos pixels.

O rótulo de linha em cada linha de grade não exibe um authored size, apenas o , porque os computed sizetamanhos de linha não foram criados (especificados) na propriedade grid-template-rows CSS na folha de estilo CSS.

Veja também:

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

Mostrar nomes de áreas

Na sobreposição de grade na página da Web renderizada, você pode mostrar nomes de área, como superior, inferior1 e inferior2.

Para mostrar nomes de áreas:

1. Execute as etapas em Exibir a sobreposição de grade em uma página da Web renderizada, acima.

2. Na seção >Grade / Grid LanesSubseção Configurações de exibição de sobreposição, marque a caixa de seleção Mostrar nomes de área:

   

Estender linhas de grade

Você pode estender as linhas de grade da sobreposição de grade até a borda da viewport, ao longo de cada eixo.

Para estender as linhas de grade:

1. Execute as etapas em Exibir a sobreposição de grade em uma página da Web renderizada, acima.

2. Na subseção Configurações de exibição de sobreposição da seção >Grade/Raias de grade, marque a caixa de seleção Estender linhas de grade:

   

Sobreposições de grade

Na guia Layout da ferramenta Elementos (agrupada com a guia Estilos), a seção Sobreposições de raias de grade / grade contém uma lista de elementos que possuem uma grade CSS. Cada grade tem uma caixa de seleção, juntamente com várias opções.

Habilitar exibições de sobreposição de várias grades

Para habilitar exibições de sobreposição de várias grades:

1. Execute as etapas em Exibir a sobreposição de grade em uma página da Web renderizada, acima.

2. Na subseção Grade/Pistas de grade da seção >Grade/Pistas de grade , marque a caixa de seleção ao lado de cada nome de várias grades:

   

   Uma sobreposição de Grade CSS é exibida para cada elemento selecionado que possui uma grade CSS. No exemplo acima, três sobreposições de grade estão habilitadas. Cada grade CSS tem uma cor diferente na página da Web renderizada:

   • body - a sobreposição de grade dourada.
   • div.fruit-box - a sobreposição de grade rosa.
   • div.snack-box - a sobreposição de grade azul.

Personalizar a cor da sobreposição da grade

Para personalizar a cor da sobreposição da grade:

1. Execute as etapas em Exibir a sobreposição de grade em uma página da Web renderizada, acima.

2. Na subseção Grade/Raias de grade da seção >Grade/Raias de grade , clique na caixa Escolher a cor de sobreposição para este elemento ao lado do nome de um elemento:

   

   O Seletor de Cores é aberto.

Veja também:

• Altere as cores com o Seletor de Cores na referência de recursos CSS.

Realçar o elemento de grade na página da Web e na árvore DOM

Para qualquer elemento que tenha um layout de grade CSS, você pode rolar automaticamente até o elemento na página da Web renderizada e selecionar automaticamente o elemento na árvore DOM.

Para rolar até um elemento que usa grade na página da Web e selecionar o elemento na árvore DOM:

1. Execute as etapas em Exibir a sobreposição de grade em uma página da Web renderizada, acima.

2. Na subseção Grade/Raias de grade da seção >Sobreposições de raias de grade/grade, clique no botão Mostrar elemento no painel Elementos () ao lado de um nome de elemento:

   

   • A página da web renderizada é rolada para o elemento que usa o layout de grade CSS e o elemento é brevemente realçado na página da web renderizada.

   • Na ferramenta Elementos , a árvore DOM rola automaticamente para o elemento e o elemento é selecionado.

   Essa rolagem e realce automáticos funcionam independentemente de a caixa de seleção do elemento estar marcada ou desmarcada.

Confira também

Páginas da Web de demonstração:

• Inspecionar layouts de grade CSS

MDN:

• Layout de grade CSS
  • Layout de grade usando posicionamento baseado em linha
  • Layout usando linhas de grade nomeadas
• colunas de modelo de grade
• grid-template-rows

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.