O Visualizador de Grid & Flex torna os layouts invisíveis visíveis. Ele sobrepõe guias de grade, números de linha, nomes de área e indicadores de alinhamento flexível diretamente na sua página, ajudando você a entender exatamente como seus elementos estão sendo posicionados e por que eles se comportam de determinada maneira.
Entender layouts complexos de Grid e Flexbox apenas olhando para o código pode ser difícil. Esta ferramenta fornece uma representação visual em tempo real do seu sistema de layout. Para Grid, ela mostra linhas de grade, números de trilha (track numbers), nomes de áreas e lacunas (gaps). Para Flexbox, ela destaca o eixo principal e o eixo cruzado, indicadores de alinhamento (justify-content, align-items) e o comportamento de encolhimento/crescimento (flex-grow/shrink) de cada item. Você pode alternar entre diferentes modos de visualização, ver as dimensões calculadas de cada célula ou item e identificar instantaneamente problemas de alinhamento ou transbordamento (overflow). É essencial para dominar layouts modernos e garantir que eles sejam responsivos em todos os tamanhos de tela.
Desenha linhas de grade, números de trilha e nomes de áreas diretamente sobre os elementos Grid. Veja as dimensões exatas de cada coluna e linha, facilitando o alinhamento de elementos com precisão de pixel.
Visualiza os eixos principal e cruzado para contêineres Flexbox. Veja como as propriedades justify-content e align-items estão afetando a distribuição dos itens dentro do contêiner.
Destaca as propriedades gap, row-gap e column-gap, bem como o preenchimento interno (padding) dos contêineres. Identifique rapidamente se o espaçamento entre itens está vindo de lacunas ou margens.
Clique em qualquer contêiner para ver suas propriedades de layout completas: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap e todas as propriedades de dimensionamento de filhos (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Cada elemento filho dentro de um contêiner Grid ou Flex mostra seu tamanho real renderizado, valores de flex-grow/shrink e posicionamento da área de grade. Veja exatamente quanto espaço cada filho ocupa e por quê.
Detecta contêineres Grid e Flex aninhados dentro de outros contêineres Grid/Flex. A sobreposição renderiza cada nível de aninhamento com cores diferentes para que você possa ver a hierarquia completa do layout.
Se o seu layout Grid não estiver se comportando como esperado, use a sobreposição para verificar se as áreas estão definidas corretamente e se os itens estão ocupando as trilhas certas.
Use os indicadores de eixo para entender como justify-content e align-items estão distribuindo o espaço. Identifique por que os itens não estão centralizados ou por que há espaço extra inesperado.
Redimensione o navegador e veja a sobreposição da grade atualizar em tempo real. Veja como grid-template-columns muda de "1fr 1fr 1fr" no desktop para "1fr" no mobile, e verifique a transição em cada breakpoint.
Visite sites bem construídos e veja como eles usam layouts Grid e Flex em produção. As sobreposições visuais tornam conceitos abstratos (unidades fr, auto-fit, justify-content) tangíveis e interativos.
Verifique se todas as grades de cards em uma página usam a mesma contagem de colunas e valores de gap. A sobreposição torna as inconsistências imediatamente visíveis — uma seção usando gap de 20px enquanto outra usa 24px fica óbvio à primeira vista.
Abra o dock flutuante do DevSuite Pro e clique no ícone Visualizador de Grid & Flex. A ferramenta começará a escanear a página em busca de contêineres de layout.
Clique em qualquer elemento que use display: grid ou display: flex. A sobreposição visual aparecerá instantaneamente sobre o elemento selecionado.
Veja as linhas de grade, eixos flex e indicadores de espaçamento. Use o painel de controle para alternar entre mostrar números de linha, nomes de área ou dimensões.
Clique nos itens dentro do contêiner para ver suas propriedades individuais de posicionamento e como elas contribuem para o layout final.
Altere as propriedades de layout no seu CSS e veja a visualização atualizar em tempo real. Valide se as mudanças produzem o comportamento de layout desejado.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
