Conseils concernant les outils de développement: inspecter la grille CSS

Sofia Emelianova
Sofia Emelianova

Les outils pour les développeurs Chrome rendent le débogage des mises en page sous forme de grille CSS intuitif grâce à de nombreuses options de visualisation.

Regardez la vidéo pour découvrir comment activer/désactiver la superposition de grille dans le panneau Éléments et comment l'utiliser pour:

Superposition de la grille.

  • Visualiser et inspecter les mises en page sous forme de grille
  • Reportez-vous aux numéros de ligne et de colonne pour y faire référence lorsque vous placez des éléments de la grille.
  • Utilisez des noms de ligne et de zone et affichez-les sur la superposition si vous avez beaucoup d'éléments dans la grille et que les chiffres prêtent à confusion.
  • Vérifiez la taille des pistes.

De plus, avec l'éditeur de grille du volet Éléments > Styles, vous pouvez aligner les éléments et leur contenu dans une grille d'un simple clic sur un bouton au lieu de saisir des règles CSS.

L'éditeur de grille.

Pour une expérience d'apprentissage plus pratique, suivez le tutoriel Inspecter la grille CSS.