Inspecionar esquemas de Grelha CSS

Utilize o separador Esquema na ferramenta Elementos para identificar grelhas CSS num site e depurar problemas de esquema de grelha com sobreposições de grelha personalizáveis.

Conteúdo detalhado:

• Apresentar a sobreposição da grelha numa página Web composta
• Alinhar os itens de grelha e os respetivos conteúdos: o pop-up do editor de grelha
• Opções de visualização da grelha
• Definições de visualização de sobreposição
  • Mostrar números de linha
  • Ocultar etiquetas de linha
  • Mostrar nomes de linhas
  • Mostrar tamanhos de faixa
  • Mostrar nomes de área
  • Expandir linhas de grelha
• Sobreposições de grelha
  • Ativar vistas de sobreposição de várias grelhas
  • Personalizar a cor de sobreposição da grelha
  • Realçar o elemento de grelha na página Web e na árvore DOM
• Confira também

Apresentar a sobreposição da grelha numa página Web composta

O CSS Grid é um paradigma de esquema avançado para a Web. Uma boa página Web para saber mais sobre o CSS Grid e as respetivas funcionalidades é o esquema de grelha CSS na MDN.

Para utilizar a sobreposição da grelha numa página Web composta:

1. Aceda a uma página que utilize o esquema Grelha CSS, como a página de demonstração Inspecionar esquemas de Grelha CSS , numa nova janela ou separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

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

3. Na árvore DOM, expanda corpo>principal.

   Os <div> elementos têm um distintivo de grelha :

   

   Quando um elemento HTML na página Web tiver display: grid ou display: inline-grid aplicado à mesma, é apresentado um distintivo de grelha junto ao elemento na árvore DOM na ferramenta Elementos .

4. Clique no distintivo de grelha junto a um elemento, como <div class="fruit-box">:

   

   É apresentada uma sobreposição de grelha sobre o elemento na página Web composta. O distintivo de grelha muda do texto azul no fundo branco para o texto branco no fundo azul.

   Na página Web composta, a sobreposição da Grelha CSS é apresentada numa camada à frente do elemento da página Web. A sobreposição da Grelha CSS mostra a posição das linhas de grelha (linhas e colunas) e das faixas.

   Se clicar várias vezes no distintivo de grelha , este é ativado e desativado.

   Da mesma forma, às vezes há um distintivo de subgrelha . Pode ativar/desativar a sobreposição da Grelha GSS numa subgrelha ao clicar no distintivo da subgrelha . Veja Subgrelha no MDN.

5. Clique no separador Esquema , que está agrupado com o separador Estilos na ferramenta Elementos :

   

   O separador Esquema inclui uma secção Grid/Grid Lanes , que inclui:

   • Uma lista pendente.
   • Caixas de verificação para opções de visualização.
   • Uma caixa de verificação para cada elemento que utiliza o esquema grelha CSS.

   Quando uma página Web utiliza uma grelha CSS, o separador Esquema inclui a secção Grid/Grid Lanes . Utilize a secção Grid/Grid Lanes para configurar as informações a apresentar nas sobreposições de grelha na página Web composta.

Alinhar os itens de grelha e os respetivos conteúdos: o pop-up do editor de grelha

Pode alinhar os itens de grelha CSS e os respetivos conteúdos ao clicar num botão (para abrir o pop-up do editor de grelha), em vez de ter de definir diretamente as regras CSS.

Para alinhar os itens de grelha CSS e os respetivos conteúdos:

1. Siga os passos indicados em Apresentar a sobreposição da grelha numa página Web composta, acima.

   Como resultado, o separador Esquema está selecionado, para um elemento na árvore DOM (como <div class="fruit-box">) que tem um distintivo de grelha .

2. Selecione o separador Estilos .

3. Localize uma regra CSS que tenha o botão Abrir editor de grelha , como a .fruit-box regra:

   

4. Na regra CSS, junto a display: grid, clique no botão Abrir editor de grelha .

   O pop-up do editor de grelha é aberto:

   

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

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

   Em cada conjunto de botões, os botões são botões de opção mutuamente exclusivos. Se clicar duas vezes num botão de opção, não é selecionado nenhum botão de opção nesse conjunto e o valor regressa ao normal.

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

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

   Os itens de grelha e o conteúdo são compostos novamente na janela viewport.

Opções de visualização da grelha

A secção Grelha/Faixas de Grelha no painel Esquema contém duas subsecções:

• Definições de visualização de sobreposição
• Sobreposições de grelha

Os detalhes encontram-se abaixo.

Definições de visualização de sobreposição

No painel Esquema da ferramenta Elemento, na secção Grelha expansível/Faixas de Grelha, existe uma subsecção Sobrepor definições de visualização:

A subsecção Sobrepor definições de apresentação consiste em duas partes:

• Uma lista pendente com os seguintes comandos:

  • Ocultar etiquetas de linha – oculte as etiquetas de linha para cada sobreposição da grelha.
  • Mostrar números de linha – mostrar os números de linha para cada sobreposição da grelha (selecionado por predefinição).
  • Mostrar nomes de linhas – mostrar os nomes das linhas para cada sobreposição de grelha no caso de grelhas com nomes de linhas.

• Caixas de verificação:

  • Mostrar tamanhos de faixa – alterne para mostrar ou ocultar tamanhos de faixa.
  • Mostrar nomes de área – alterne para mostrar ou ocultar nomes de área, no caso de grelhas com áreas de grelha nomeadas.
  • Expandir linhas de grelha – por predefinição, as linhas de grelha só são apresentadas dentro do elemento que tem display: grid ou display: inline-grid definiu. Quando ativa esta opção, as linhas de grelha estendem-se até à margem da janela viewport ao longo de cada eixo.

Os detalhes encontram-se abaixo.

Mostrar números de linha

Pode mostrar ou ocultar números de linha (linhas e colunas) na sobreposição da grelha na página Web composta. Na Grelha CSS, os números de linha são utilizados para identificar as linhas verticais e horizontais que separam linhas e colunas de uma grelha CSS. Estes números de linha não se destinam às linhas de código no ficheiro de origem HTML.

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

1. Siga os passos indicados em Apresentar a sobreposição da grelha numa página Web composta, acima.

2. Na secção > Grelha/Faixas de Grelha, subsecção >Sobrepor definições de visualização mostrar lista pendente Mostrar etiquetas de linha, selecione Mostrar números de linha. Esta opção está selecionada por predefinição.

   São apresentados os números das linhas (linhas e colunas) para cada sobreposição da grelha:

   

Por predefinição, os números de linha positivos e negativos (linhas e colunas) são apresentados na sobreposição da grelha. Para obter informações sobre números negativos na sobreposição da grelha, veja Counting backs in Grid layout using line-based placement at MDN (Contar para trás no Esquema de grelha com colocação baseada em linhas na MDN).

Ocultar etiquetas de linha

Para ocultar as etiquetas de linha na sobreposição da grelha:

1. Siga os passos indicados em Apresentar a sobreposição da grelha numa página Web composta, acima.

2. Na secção > Grelha/Faixas de Grelha Subsecção > sobrepor definições de visualizaçãoMostrar lista pendente Etiquetas de linha, selecione Ocultar etiquetas de linha:

   

   As etiquetas das linhas (linhas/colunas) estão ocultas em cada sobreposição da grelha.

Mostrar nomes de linhas

Na sobreposição da grelha na página Web composta, pode mostrar os nomes das linhas. Isto torna mais fácil visualizar a posição de início e de fim de um elemento.

Para mostrar os nomes das linhas na sobreposição da grelha:

1. Siga os passos indicados em Apresentar a sobreposição da grelha numa página Web composta, acima.

2. Na secção > Grelha/Faixas de GrelhaSubsecção> Sobrepor definições de visualização Mostrar lista pendente De etiquetas de linha, selecione Mostrar nomes de linhas:

   

   Os nomes das linhas em vez dos números são apresentados. Esta opção apresenta os nomes das linhas para cada sobreposição de grelha, se forem fornecidos nomes.

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

   Na demonstração, o elemento Laranja estende-se da esquerda para a direita, através grid-column: left das regras CSS e grid-column: right CSS.

Veja também:

• Esquema com linhas de grelha nomeadas no MDN.

Mostrar tamanhos de faixa

Na sobreposição da grelha na página Web composta, pode mostrar os tamanhos dos registos.

Para mostrar os tamanhos dos registos na sobreposição da grelha:

1. Siga os passos indicados em Apresentar a sobreposição da grelha numa página Web composta, acima.

2. No separador Esquema da ferramenta Elementos, na secção Grelha/Faixas de Grelha, na subsecção Grid/Grid Lanes sobrepõe-se, selecione a caixa de verificação para cada elemento no qual pretende mostrar a sobreposição da grelha. Por exemplo, selecione a caixa de verificação junto a div.fruit-box e div.snack-box.

3. Na secção >Grelha/Faixas de Grelha Subsecção sobrepor definições de visualização, selecione a caixa de verificação Mostrar tamanhos de faixa:

   

Cada etiqueta 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;
  ...
}

Etiquetas de coluna:

As seguintes etiquetas de linha de tamanho de faixa são apresentadas nas colunas de grelha, para o elemento <div class="snack-box">da demonstração:

Se o ecrã da máquina virtual estiver definido para uma densidade de píxeis diferente, a demonstração poderá produzir valores diferentes, como metade dos píxeis.

A etiqueta de linha em cada coluna de grelha apresenta o authored size para além de computed size, porque os tamanhos das colunas foram criados (especificados), na propriedade CSS na folha grid-template-columns de estilos CSS.

Etiquetas de linha:

As seguintes etiquetas de linha de tamanho de faixa são apresentadas nas linhas de grelha, para o elemento <div class="snack-box">da demonstração:

Se o ecrã da máquina virtual estiver definido para uma densidade de píxeis diferente, a demonstração poderá produzir valores diferentes, como metade dos píxeis.

A etiqueta de linha em cada linha de grelha não apresenta um authored size, apenas o computed size, porque os tamanhos de linha não foram criados (especificados) na propriedade CSS na folha grid-template-rows de estilos CSS.

Veja também:

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

Mostrar nomes de área

Na sobreposição da grelha na página Web composta, pode mostrar nomes de área, tais como superior, inferior1 e inferior2.

Para mostrar os nomes das áreas:

1. Siga os passos indicados em Apresentar a sobreposição da grelha numa página Web composta, acima.

2. Na secção >Grelha/Faixas de GrelhaSubsecção sobrepor definições de visualização, selecione a caixa de verificação Mostrar nomes de área:

   

Expandir linhas de grelha

Pode expandir as linhas de grelha da sobreposição da grelha até à margem da janela viewport, ao longo de cada eixo.

Para expandir as linhas de grelha:

1. Siga os passos indicados em Apresentar a sobreposição da grelha numa página Web composta, acima.

2. Na secção > Grelha/Faixas de Grelha Subsecção sobrepor definições de visualização, selecione a caixa de verificação Expandir linhas de grelha:

   

Sobreposições de grelha

No separador Esquema da ferramenta Elementos (agrupado com o separador Estilos), a secção Sobreposições de Grelha/Faixas de Grelha contém uma lista de elementos que têm uma grelha CSS. Cada grelha tem uma caixa de verificação, juntamente com várias opções.

Ativar vistas de sobreposição de várias grelhas

Para ativar vistas de sobreposição de várias grelhas:

1. Siga os passos indicados em Apresentar a sobreposição da grelha numa página Web composta, acima.

2. Na secção >Grelha/Faixas de Grelha– subsecção Grelha/Sobreposições de Faixas de Grelha, selecione a caixa de verificação junto a cada nome de várias grelhas:

   

   É apresentada uma sobreposição da Grelha CSS para cada elemento selecionado que tenha uma grelha CSS. No exemplo acima, estão ativadas três sobreposições de grelha. Cada grelha CSS tem uma cor diferente na página Web composta:

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

Personalizar a cor de sobreposição da grelha

Para personalizar a cor de sobreposição da grelha:

1. Siga os passos indicados em Apresentar a sobreposição da grelha numa página Web composta, acima.

2. Na secção >Grelha/Faixas de Grelha, a subsecção Grelha/Faixas de Grelha sobrepõe-se, clique na caixa Escolher a cor de sobreposição deste elemento junto a um nome de elemento:

   

   O Seletor de Cores é aberto.

Veja também:

• Altere as cores com a referência de funcionalidades do Selecionador de Cores no CSS.

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

Para qualquer elemento que tenha um esquema de grelha CSS, pode deslocar-se automaticamente para o elemento na página Web composta e selecionar automaticamente o elemento na árvore DOM.

Para se deslocar para um elemento de grelha na página Web e selecionar o elemento na árvore DOM:

1. Siga os passos indicados em Apresentar a sobreposição da grelha numa página Web composta, acima.

2. Na subsecção > Grelha/Faixas de Grelha Grelha/Faixas de Grelha sobrepõe-se, clique no elemento Mostrar no painel Elementos () junto a um nome de elemento:

   

   • A página Web composta é deslocada para o elemento que utiliza o esquema de grelha CSS e o elemento é brevemente realçado na página Web composta.

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

   Este deslocamento e realce automáticos funcionam independentemente de a caixa de verificação do elemento estar selecionada ou desmarcada.

Confira também

Páginas Web de demonstração:

• Inspecionar esquemas de Grelha CSS

MDN:

• Esquema de grelha CSS
  • Esquema de grelha com posicionamento baseado em linhas
  • Esquema com linhas de grelha nomeadas
• grid-template-columns
• grid-template-rows

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.