Sofia Emelianova
O Chrome DevTools torna a depuração de layouts de grade CSS intuitiva com uma variedade de opções de visualização.
Assista o vídeo para saber como ativar ou desativar a sobreposição de grade no painel Elementos.
- Visualizar e inspecionar layouts de grade.
- Veja os números de linha e coluna para se referir ao posicionar itens de grade.
- Use nomes de linhas e áreas e veja-os na sobreposição se você tiver muitos itens de grade e os números estiverem confusos.
- Verifique os tamanhos das faixas.
Além disso, com o Editor de grade no painel Elementos > Estilos, você pode alinhar itens e o conteúdo deles em um layout de grade clicando em um botão, em vez de digitar regras de CSS.
Para uma experiência de aprendizado mais prática, siga o tutorial Inspecionar a grade CSS.