Exibição de Grids no Depurador do Navegador

Ao trabalhar com grids durante a criação de um site, às vezes é necessário verificar se a colocação dos elementos na grade está correta. Além disso, se houver um erro, precisamos descobrir qual elemento está causando o posicionamento incorreto. Para esse fim, podemos usar o depurador do navegador.

Vamos examinar um grid usando o depurador do navegador Chrome. Primeiro, selecionamos o objeto de interesse com grid e, clicando com o botão direito do mouse, escolhemos a opção 'Inspecionar' na lista:

Agora, no painel do navegador que abriu à direita, passamos o cursor sobre nosso objeto com grid e notamos que na linha ao lado do elemento pai há um botão grid:

Depois de clicar no botão grid, veremos que nosso objeto é exibido em um sistema de grid visualmente compreensível, com a numeração de todas as colunas e linhas:

Agora, preste atenção no painel do depurador. Ele contém as abas Styles, Computed, Layout e outras. Mude da aba Styles, que está ativa por padrão, para a aba Layout. Você verá uma lista de configurações do seu grid:

Vamos selecionar para exibição a primeira opção Show track sizes, que mostra o tamanho dos trilhos:

Com a opção Show area names é possível exibir os nomes das áreas do grid, se eles estiverem definidos. E selecionando a opção Extend grid lines veremos as linhas dos trilhos estendidas para além dos limites do grid: