Les outils pour les développeurs Chrome rendent le débogage des mises en page de grille CSS intuitif grâce à diverses options de visualisation.
Regardez la vidéo pour découvrir comment activer la superposition de la grille dans le panneau Éléments et l'utiliser pour:
- Visualisez et inspectez les mises en page en grille.
- Consultez les numéros de ligne et de colonne auxquels vous pouvez vous référer lorsque vous placez des éléments de grille.
- Utilisez des noms de lignes et de zones, et affichez-les sur la superposition si vous avez de nombreux éléments de grille et que les chiffres sont difficiles à comprendre.
- Vérifiez les tailles des pistes.
De plus, avec l'éditeur de grille dans le volet Éléments > Styles, vous pouvez aligner les éléments et leur contenu dans une mise en page en grille en cliquant sur un bouton au lieu de saisir des règles CSS.
Pour une expérience d'apprentissage plus pratique, suivez le tutoriel Inspecter la grille CSS.