Inspecionar Grelha CSS
Este artigo explica-lhe como identificar grelhas CSS num site e depurar problemas de esquema de grelha com sobreposições de grelha personalizáveis.
Este artigo utiliza a página Web Inspecionar demonstração do CSS Grid .
Antes de começar
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.
Descobrir grelhas CSS
Quando um elemento HTML na sua 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 :
Clique no distintivo de grelha junto a um elemento para apresentar uma sobreposição de grelha sobre esse elemento na página Web composta. A sobreposição é apresentada sobre o elemento e mostra a posição das linhas e faixas da grelha:
Quando as grelhas são incluídas numa página Web, o painel Esquema na ferramenta Elementos inclui uma secção Grelha que lista os contentores de grelha:
Utilize a secção Grelha para configurar as informações a apresentar nas sobreposições de grelha na página Web composta. A secção Grelhano painel Esquema contém as seguintes subsecções:
| Subsecção | Objetivo |
|---|---|
| Definições de visualização de sobreposição | Configura as informações apresentadas na sobreposição da grelha. |
| Sobreposições de grelha | Mostra ou oculta a sobreposição da grelha para cada contentor de grelha que está presente na página Web e realça temporariamente uma grelha na página Web. |
Definições de visualização de sobreposição
No painel Esquema , na secção Grelha expansível, a secção Sobrepor definições de visualização contém a seguinte IU.
Lista pendente
Selecione uma das seguintes opções na lista pendente:
| Item de lista | Descrição |
|---|---|
| Ocultar etiquetas de linha | Oculta as etiquetas das linhas para cada sobreposição da grelha. |
| Mostrar números de linha | Apresenta os números das linhas para cada sobreposição da grelha. Selecionado por predefinição. |
| Mostrar nomes de linhas | Apresenta os nomes das linhas para cada sobreposição de grelha quando são fornecidos nomes. |
As secções seguintes explicam os comandos da lista pendente Sobrepor definições de apresentação .
Ocultar etiquetas de linha
Na lista pendente, selecione Ocultar etiquetas de linha para ocultar as etiquetas das linhas para cada sobreposição da grelha:
Mostrar números de linha
Na lista pendente, selecione Mostrar números de linha para apresentar os números das linhas para cada sobreposição da grelha (selecionado por predefinição):
Por predefinição, os números de linha positivos e negativos 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).
Mostrar nomes de linhas
Na lista pendente, selecione Mostrar nomes de linhas para ver os nomes das linhas em vez de números; esta ação apresenta os nomes das linhas para cada sobreposição de grelha quando são fornecidos nomes:
No exemplo acima, 4 linhas têm nomes: left, middle1, middle2e right.
Para obter mais informações sobre nomes de linhas na sobreposição da grelha, veja Esquema com linhas de grelha nomeadas no MDN.
Caixas de seleção
A secção Sobrepor definições de visualização na secção Grelhano painel Esquema contém as seguintes caixas de verificação:
| Caixa de seleção | Descrição |
|---|---|
| Mostrar tamanhos de faixa | Apresenta ou oculta os tamanhos das faixas. |
| Mostrar nomes de área | Apresenta ou oculta os nomes da área, quando são fornecidos nomes. |
| Expandir linhas de grelha | Apresenta ou oculta as extensões das dimensões da grelha ao longo de cada eixo. Por predefinição, as linhas de grelha só são apresentadas dentro do elemento com display: grid ou display: inline-grid CSS definido no mesmo. |
As secções seguintes explicam estas caixas de verificação.
Mostrar tamanhos de faixa
Para ver os tamanhos dos registos da grelha, selecione a caixa de verificação Mostrar tamanhos de faixa :
Os [authored size] e [computed size] são, em seguida, apresentados em cada etiqueta de linha.
| Tamanho | Detalhes |
|---|---|
| tamanho criado | O tamanho definido na folha de estilos (omitido se não estiver definido). |
| tamanho calculado | O tamanho real no ecrã. |
Na demonstração, os tamanhos das snack-box colunas são definidos no grid-template-columns:1fr 2fr; CSS. Por conseguinte, as etiquetas de linha de coluna apresentam os tamanhos criados e calculados:
| Controlar o tamanho | Tamanho criado | Tamanho calculado |
|---|---|---|
| 1fr • 48,33px | 1fr | 48.33px |
| 2fr • 96,67px | 2fr | 96.67px |
As etiquetas de linha nas linhas apresentam apenas tamanhos calculados, uma vez que não existem tamanhos de linha definidos na folha de estilos:
| Controlar o tamanho | Tamanho criado | Tamanho calculado |
|---|---|---|
| 40px | 40px | |
| 40px | 40px |
Mostrar nomes de área
Para ver os nomes das áreas, selecione a caixa de verificação Mostrar nomes de área :
No exemplo acima, existem 3 áreas na grelha: superior, inferior1 e inferior2.
Expandir linhas de grelha
Para expandir as linhas de grelha até à margem da janela viewport ao longo de cada eixo, selecione a caixa de verificação Expandir linhas de grelha :
Sobreposições de grelha
A secção Sobreposições de grelha contém uma lista de grelhas que estão presentes na página Web, cada uma com uma caixa de verificação, juntamente com várias opções.
Ativar vistas de sobreposição de várias grelhas
Para apresentar a grelha de sobreposição de várias grelhas, selecione a caixa de verificação junto a cada nome da grelha:
No exemplo acima, existem três sobreposições de grelha ativadas, cada grelha representada com 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 abrir o seletor de cores e personalizar a cor de sobreposição da grelha, clique na caixa junto ao nome da sobreposição da grelha:
Realçar o elemento de grelha na página Web e na árvore DOM
Para se deslocar para um esquema de grelha na página Web composta e selecionar o elemento que tem o esquema de grelha na árvore DOM:
- Na secção Sobreposições de grelha, clique no elemento Mostrar no painel Elementos (
) junto ao nome do elemento:
Isto funciona independentemente de a caixa de verificação do elemento estar selecionada ou desmarcada.
Confira também
Páginas Web de demonstração:
MDN:
Observação
Partes desta página são modificações baseadas no trabalho criado e partilhado pela Google e utilizado de acordo com os termos descritos na Licença Internacional Creative Commons Attribution 4.0. A página original é encontrada aqui e é da autoria de Jecelyn Yeen.
Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.