Inspetor de layout para Flexbox e Grid

O Chrome DevTools identifica contêineres flexíveis com um distintivo "flex" ao lado do nó DOM no painel Elementos. Clicar no distintivo alterna a sobreposição do Flexbox — linhas coloridas que mostram o eixo principal, o eixo transversal, os limites dos itens e o espaçamento entre lacunas.

Contêineres de grade exibem um distintivo "grid". Clicar nele alterna a sobreposição da grade: linhas coloridas para colunas, linhas e lacunas. Sobreposições persistentes (fixadas no painel Layout) continuam visíveis enquanto você rola ou redimensiona a janela de visualização.

DevTools → Elementos → a aba Layout lista todos os contêineres flexíveis e de grade da página. Clicar no nome de um contêiner o seleciona no DOM e alterna sua sobreposição. A aparência da sobreposição (cor das linhas, visibilidade dos rótulos e tamanhos das trilhas) pode ser configurada aqui.

A sobreposição mostra os nomes e tamanhos das trilhas quando "Mostrar tamanhos das trilhas" está ativado. Tamanhos intrínsecos (auto, min-content, max-content) e unidades fracionárias (fr) exibem seus valores resolvidos em pixels — revelando como as unidades fr dividem o espaço disponível.

Selecione um item flexível (filho de um contêiner flexível). O painel Estilos mostra a expansão abreviada de flex — flex-grow, flex-shrink, flex-basis. A sobreposição destaca o tamanho do item no eixo principal, sua base e qualquer crescimento ou redução aplicada.

Contêineres de grade com grid-template-areas exibem sobreposições de áreas nomeadas. Cada região nomeada recebe um rótulo e uma cor. Esse recurso visual facilita verificar se as atribuições de grid-area correspondem ao modelo de disposição pretendido.

O suporte a subgrid no DevTools identifica os contêineres subgrid de forma distinta. As linhas de suas trilhas se alinham às trilhas da grade pai — a sobreposição mostra esse alinhamento visualmente, confirmando que os itens subgrid participam do sistema de coordenadas da grade pai.

Itens desalinhados geralmente resultam de valores incorretos de justify-content, align-items ou align-self. A sobreposição de flexível/grade mostra as posições dos itens em relação às linhas dos eixos. Tente alternar as propriedades de alinhamento no painel Estilos e observe as mudanças na sobreposição em tempo real.

A sobreposição representa o espaçamento entre os itens como faixas coloridas. Isso facilita confirmar os valores de gap e identificar se o espaçamento vem de gap (correto) ou de margin (que pode sofrer colapso inesperado em linhas flexíveis).

A sobreposição da grade diferencia as trilhas implícitas (criadas automaticamente para itens que transbordam) das trilhas explícitas (definidas em grid-template). Linhas tracejadas marcam as trilhas implícitas. Se o conteúdo criar trilhas implícitas inesperadas, a sobreposição revelará imediatamente o padrão de transbordamento.

Combine o Inspetor de disposição com o Modo de dispositivo. Redimensione a área de visualização e observe como a quebra de linha do Flexbox e as trilhas auto-fill/auto-fit da grade se reorganizam em tempo real. Isso detecta falhas na disposição responsiva mais cedo do que redimensionar manualmente uma janela do navegador.

O que a sobreposição de grade do DevTools mostra que não é visível na página renderizada?

O Inspetor de disposição de Flexbox e grade do DevTools visualiza linhas dos eixos, tamanhos das trilhas, espaçamento entre itens, áreas nomeadas e trilhas implícitas como sobreposições interativas. Combinado com o painel de disposição para gerenciar as sobreposições, ele torna a depuração de estruturas complexas em CSS mais rápida e intuitiva do que ler apenas o CSS.