Sofia Emelianova
O Chrome DevTools torna a depuração de layouts de grade CSS intuitiva com várias opções de visualização.
Assista ao vídeo para aprender a ativar ou desativar a sobreposição de grade no painel Elementos para:
- Visualizar e inspecionar layouts de grade.
- Veja os números de linha e coluna para consultar 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 forem confusos.
- Verifique o tamanho das faixas.
Além disso, com o Editor de grade no painel Elementos > Estilos, é possível alinhar itens e o conteúdo deles em um layout de grade clicando em um botão, em vez de digitar regras CSS.
Para uma experiência de aprendizado mais prático, siga o tutorial Inspecionar a grade CSS.