Este guia mostra como descobrir grades CSS em uma página, examiná-las e depurar problemas de layout no painel Elementos do Chrome DevTools.
Os exemplos mostrados nas capturas de tela que aparecem neste artigo são de duas páginas da Web: Caixa de frutas e Caixa de lanches.
Descobrir as 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 ícone para alternar a exibição de uma sobreposição de grade na página. A sobreposição aparece sobre o elemento, dispostas como uma grade para mostrar a posição das linhas e faixas de grade:
Abra o painel Layout. Quando grades são incluídas em uma página, o painel "Layout" inclui uma seção Grid com várias opções para visualizar essas grades.
Alinhar os itens da grade e o conteúdo deles com o Editor de grade
É possível alinhar os itens de grade e o conteúdo deles com um clique de um botão em vez de digitar regras de CSS.
Para alinhar itens de grade e o conteúdo deles:
No painel Elementos > Estilos, clique no botão
Editor de grade ao lado de display: grid.
No Editor de grade, clique nos botões correspondentes para definir as propriedades CSS
align-*ejustify-*dos itens da grade e do conteúdo deles.
Observe os itens e o conteúdo 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 linha: oculte os rótulos de linha de cada sobreposição de grade.
- Mostrar números de linha: mostre os números das linhas 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 das 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: gridoudisplay: inline-griddefinido. 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 de linha positivos e negativos são exibidos na sobreposição de grade.
Ocultar rótulos de linhas
Selecione Ocultar rótulos de linha para ocultar os números das linhas.
Mostrar nomes de linhas
Selecione Mostrar nomes das linhas para conferir os nomes das linhas em vez de números. Neste exemplo, há quatro linhas com nomes: "left", "middle1", "middle2" e "right".
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 das faixas
Marque a caixa de seleção Mostrar tamanhos das faixas para ver os tamanhos das faixas da grade.
O DevTools exibirá [authored size] - [computed size] em cada rótulo de linha: tamanho Criado: o tamanho definido na folha de estilo (omitido se não estiver 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 de linha da coluna mostram os tamanhos criados e calculados: 1fr - 96,66 px e 2fr - 193,32 px.
Os rótulos de linha de linha mostram apenas os tamanhos calculados: 80px e 80px, já que não há tamanhos de linha definidos na folha de estilo.
Mostrar nomes de áreas
Para acessar os nomes das áreas, marque a caixa de seleção Mostrar nomes das áreas. Neste exemplo, há três áreas na grade: top, bottom1 e bottom2.
Ampliar as 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
Você pode 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
É possível personalizar a cor de cada sobreposição de grade clicando no seletor de cores.
Destacar a grade
Clique no ícone de destaque para destacar imediatamente o elemento HTML, role até ele na página e selecione-o no painel Elements.
