Inspecionar a grade do CSS
Este artigo orienta você a identificar grades CSS em um site e depurar problemas de layout de grade usando sobreposições de grade personalizáveis.
Os exemplos usados nos números deste artigo são extraídos das seguintes páginas da Web:
Antes de começar
O CSS Grid é um poderoso paradigma de layout para a Web. Um ótimo lugar para começar a aprender sobre a Grade do CSS e os muitos recursos é o guia layout de grade do CSS no MDN.
Descobrir grades CSS
Quando um elemento HTML em sua página tem display: grid ou display: inline-grid se aplica a ele, um grid selo é exibido ao lado dele na ferramenta 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, disposto como uma grade para exibir a posição das linhas e faixas da grade:
Abra o painel Layout . Quando as grades são incluídas em uma página, o painel Layout inclui uma seção Grade contendo várias opções para exibir as grades.
A seção Grade no painel Layout contém as duas sub-seções a seguir:
- Configurações de exibição de sobreposição
- Sobreposições de grade
Configurações de exibição de sobreposição
Na guia Layout , na seção Grade expansível, a seção Configurações de exibição sobreposição contém a interface do usuário a seguir.
Lista suspensa
Selecione uma das seguintes opções na lista suspensa:
| Opção de linha | Detalhes |
|---|---|
| Ocultar rótulos de linha | Ocultar os rótulos das linhas para cada sobreposição de grade. |
| Mostrar números de linha | Exiba os números das linhas para cada sobreposição de grade (selecionado por padrão). |
| Mostrar nomes de linha | Exiba os nomes das linhas para cada sobreposição de grade quando os nomes forem fornecidos. |
As seções a seguir explicam os comandos de lista suspensa configurações de exibição sobreposição .
Ocultar rótulos de linha
Na lista suspensa, selecione Ocultar rótulos de linha para ocultar os rótulos das linhas para cada sobreposição de grade.
Mostrar números de linha
Na lista suspensa, selecione Mostrar números de linha para exibir os números das linhas para cada sobreposição de grade (selecionado por padrão).
Por padrão, os números de linha positivo e negativo são exibidos na sobreposição da grade.
Para obter mais informações sobre números negativos na sobreposição da grade, consulte Posicionamento baseado em linha com a Grade CSS.
Mostrar nomes de linha
Na lista suspensa, selecione Mostrar nomes de linha para exibir os nomes de linha em vez de números; isso exibe os nomes das linhas para cada sobreposição de grade quando os nomes são fornecidos. No exemplo, 4 linhas têm nomes: left, middle1, middle2e right.
Para obter mais informações sobre nomes de linha na sobreposição da grade, consulte Layout usando linhas de grade nomeadas.
Caixas de seleção
Selecione qualquer uma das caixas de seleção na seção Configurações de exibição sobreposição :
| Opção | Detalhes |
|---|---|
| Mostrar tamanhos de faixa | Exiba (ou ocultar) os tamanhos das faixas. |
| Mostrar nomes de área | Exiba (ou ocultar) os nomes da área, quando os nomes forem fornecidos. |
| Estender linhas de grade | Exibe (ou oculta) as extensões das dimensões da grade ao longo de cada eixo. Por padrão, as linhas de grade só são mostradas dentro do elemento com display: grid ou display: inline-grid CSS definido nele. |
As seções a seguir explicam essas caixas de seleção.
Mostrar tamanhos de faixa
Selecione a caixa de seleção Mostrar tamanhos de faixa para exibir os tamanhos da faixa da grade.
DevTools exibe [authored size] e [computed size] em cada rótulo de linha.
| Size | Detalhes |
|---|---|
| tamanho criado | O tamanho definido na planilha de estilos (omitido se não for definido). |
| tamanho computado | O tamanho real na tela. |
Na demonstração, os tamanhos da snack-box coluna são definidos no grid-template-columns:1fr 2fr; CSS. Portanto, os rótulos de linha de coluna exibem tamanhos criados e computados.
| Tamanho da faixa | Tamanho criado | Tamanho computado |
|---|---|---|
| 1fr • 96.66px | 1fr | 96.66px |
| 2fr • 193.32px | 2fr | 193.32px |
Os rótulos de linha de linha exibem apenas tamanhos computados, pois não há tamanhos de linha definidos na planilha de estilos.
| Tamanho da faixa | Tamanho criado | Tamanho computado |
|---|---|---|
| 80px | 80px | |
| 80px | 80px |
Mostrar nomes de área
Para exibir os nomes da área, selecione a caixa de seleção Mostrar nomes de área . No exemplo, há três áreas na grade: superior, inferior1 e inferior2.
Estender linhas de grade
Selecione a caixa de seleção Estender linhas de grade para estender as linhas de grade até a borda do visor 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, juntamente com várias opções.
Habilitar exibições de sobreposição de várias grades
Para exibir a grade de sobreposição de várias grades, selecione a caixa de seleção ao lado de cada nome da grade. No exemplo, há duas sobreposições de grade habilitadas, cada uma representada com cores diferentes:
maindiv.snack-box
Personalizar a cor da sobreposição da grade
Para abrir o seletor de cores e personalizar a cor da sobreposição da grade, clique na caixa ao lado do nome da sobreposição da grade:
Realçar a grade
Para realçar o elemento HTML na ferramenta Elementos e rolar até ele na página da Web, clique no elemento Mostrar no painel Elementos (
).
Observação
Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Internacional de Atribuição do Creative Commons 4.0. A página original é encontrada aqui e é de autoria de Jecelyn Yeen (advogada do desenvolvedor, Chrome DevTools).
Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.