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 saber como ativar a sobreposição de grade no painel Elementos e usá-la para:
- Visualizar e inspecionar layouts de grade.
- Consulte os números de linha e coluna para se referir ao posicionar itens de grade.
- Use os nomes de linhas e áreas e confira 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 Elements > Styles, você pode alinhar itens e o conteúdo deles em um layout de grade com um clique em um botão em vez de digitar regras CSS.
Para uma experiência de aprendizado mais prática, siga o tutorial Inspecionar grade CSS.