Inspecionar layouts de grade CSS

Jecelyn Yeen

Sofia Emelianova

Este guia mostra como descobrir grades CSS em uma página, analisá-las e depurar problemas de layout no painel Elementos do Chrome DevTools.

Os exemplos nas capturas de tela que aparecem neste artigo são destas duas páginas da Web: Fruit box e Snack box.

Descubra grades CSS

Quando um elemento HTML na sua página tem display: grid ou display: inline-grid aplicado, é possível ver um selo grid ao lado dele no painel Elementos.

Clique no selo para alternar a exibição de uma sobreposição de grade na página. A sobreposição aparece sobre o elemento, disposta como uma grade para mostrar a posição das linhas e faixas da grade:

Observação:da mesma forma, você também pode alternar a sobreposição de uma subgrade com o selo da subgrade.

Abra o painel Layout. Quando grades são incluídas em uma página, o painel "Layout" inclui uma seção Grid que contém várias opções para visualizá-las.

Alinhar os itens da grade e o conteúdo deles com o Editor de grade

É possível alinhar os itens da grade e o conteúdo deles com o clique de um botão, em vez de digitar regras CSS.

Para alinhar os itens da grade e o conteúdo deles:

1. No painel Elementos > Estilos, clique no botão Editor de grade ao lado de display: grid.

   

2. No Editor de grade, clique nos botões correspondentes para definir as propriedades CSS align-* e justify-* dos itens da grade e o conteúdo deles.

   

3. Observe o conteúdo e os itens da grade ajustados na janela de visualização.

Opções de visualização em grade

A seção Grid no painel Layout contém duas subseções:

• Sobrepor configurações de exibição
• Sobreposições de grade

Vamos analisar cada uma dessas subseções em detalhes.

Sobrepor configurações de exibição

As Configurações de exibição de sobreposição consistem em duas partes:

a. Um menu suspenso com as seguintes opções:

• Ocultar rótulos de linhas: oculte os rótulos de linhas para cada sobreposição de grade.
• Mostrar números de linha: mostre os números de linha de cada sobreposição de grade (selecionada por padrão).
• Show line names: mostra os nomes das linhas de cada sobreposição de grade no caso de grades com nomes de linhas.

b. Caixas de seleção com opções em:

• Mostrar tamanhos de faixas: alterne para mostrar ou ocultar os tamanhos das faixas.
• Mostrar nomes de áreas: alterne para mostrar ou ocultar nomes de áreas, 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 com display: grid ou display: inline-grid definidos. Ao ativar essa opção, as linhas de grade se estendem até a borda da janela de visualização ao longo de cada eixo.

Vamos analisar essas configurações em mais detalhes.

Mostrar números de linha

Por padrão, os números das linhas positivos e negativos são exibidos na sobreposição de grade.

Ocultar marcadores de linhas

Selecione Ocultar rótulos de linhas para ocultar os números das linhas.

Mostrar nomes das linhas

Selecione Mostrar nomes de linhas para ver os nomes das linhas em vez de números. Neste exemplo, temos quatro linhas com nomes: esquerda, meio1, meio2 e direita.

Nesta demonstração, o elemento laranja vai da esquerda para a direita, com CSS grid-column: left / right. Mostrar os nomes das linhas facilita a visualização das posições inicial e final do elemento.

Mostrar tamanhos de faixas

Marque a caixa de seleção Mostrar tamanhos de faixas para conferir os tamanhos das faixas na grade.

O DevTools vai mostrar [authored size] - [computed size] em cada rótulo de linha: tamanho Criado: o tamanho definido na folha de estilo (omitido se não for definido). Tamanho calculado: o tamanho real na tela.

Nesta demonstração, os tamanhos das colunas snack-box são definidos no CSS grid-template-columns:1fr 2fr;. Portanto, os rótulos da linha da coluna mostram os tamanhos criados e calculados: 1fr - 96.66px e 2fr - 193.32px.

Os rótulos das linhas de linha mostram somente os tamanhos calculados: 80px e 80px, já que não há tamanhos de linha definidos na folha de estilo.

Mostrar nomes de áreas

Para exibir os nomes das áreas, marque a caixa de seleção Mostrar nomes de áreas. Neste exemplo, há três áreas na grade: top, bottom1 e bottom2.

Estender linhas de grade

Marque a caixa de seleção Estender linhas de grade para estender as linhas de grade até a borda da janela de visualização ao longo de cada eixo.

Sobreposições de grade

A seção Sobreposições de grade contém uma lista de grades presentes na página, cada uma com uma caixa de seleção, além de várias opções.

Ativar visualizações de sobreposição de várias grades

É possível ativar visualizações de sobreposição de várias grades. Neste exemplo, há duas sobreposições de grade ativadas: main e div.snack-box, cada uma representada com cores diferentes.

Personalizar a cor da sobreposição de grade

Você pode personalizar cada cor de sobreposição de grade clicando no seletor de cores.

Destacar grade

Clique no ícone de destaque para destacar imediatamente o elemento HTML, role até ele na página e selecione-o no painel "Elementos".