Ce guide vous explique comment détecter les grilles CSS sur une page, les examiner et résoudre les problèmes de mise en page dans le panneau Éléments des outils pour les développeurs Chrome.
Les exemples présentés dans les captures d'écran de cet article proviennent des deux pages Web suivantes: Boîte de fruits et Boîte de collation.
Découvrir les grilles CSS
Lorsque display: grid ou display: inline-grid est appliqué à un élément HTML de votre page, un badge grid s'affiche à côté de celui-ci dans le panneau Éléments.
Cliquez sur le badge pour afficher ou masquer une superposition de grille sur la page. La superposition apparaît sur l'élément, disposée comme une grille pour indiquer la position de ses lignes et pistes de la grille:
Ouvrez le volet Mise en page. Lorsque des grilles sont incluses sur une page, le volet de mise en page inclut une section Grille contenant un certain nombre d'options permettant d'afficher ces grilles.
Aligner les éléments de la grille et leur contenu avec l'éditeur de grille
Vous pouvez aligner les éléments de la grille et leur contenu d'un simple clic au lieu d'indiquer des règles CSS.
Pour aligner les éléments de la grille et leur contenu:
Dans le volet Éléments > Styles, cliquez sur le bouton
Éditeur de grille à côté de display: grid.
Dans l'éditeur de grille, cliquez sur les boutons correspondants pour définir les propriétés CSS
align-*etjustify-*des éléments de la grille et de leur contenu.
Observez les éléments et le contenu de la grille ajustés dans la fenêtre d'affichage.
Options d'affichage sous forme de grille
La section Grille du volet Mise en page contient deux sous-sections:
- Paramètres d'affichage des superpositions
- Superpositions de grille
Examinons chacune de ces sous-sections en détail.
Paramètres d'affichage des superpositions
Les paramètres d'affichage en superposition se composent de deux parties:
a. Un menu déroulant contenant les options suivantes:
- Masquer les libellés des lignes: masque les libellés des lignes de chaque superposition de grille.
- Afficher les numéros de ligne: affiche les numéros de ligne pour chaque superposition de grille (sélectionnée par défaut).
- Afficher les noms des lignes: affiche les noms des lignes pour chaque superposition de grille dans le cas de grilles avec des noms de ligne.
b. Cases à cocher avec des options dans:
- Afficher les tailles des pistes: activez cette option pour afficher ou masquer les tailles des pistes.
- Show Area names (Afficher les noms des zones) : permet d'afficher ou de masquer les noms des zones, dans le cas de grilles dont les zones sont nommées.
- Étendre les lignes de la grille: par défaut, les lignes de la grille ne s'affichent qu'à l'intérieur de l'élément associé à
display: gridoudisplay: inline-grid. Lorsque cette option est activée, les lignes de la grille s'étendent jusqu'au bord de la fenêtre d'affichage le long de chaque axe.
Examinons ces paramètres plus en détail.
Afficher les numéros de lignes
Par défaut, les numéros de ligne positifs et négatifs sont affichés sur la superposition de la grille.
Masquer les libellés des lignes
Sélectionnez Masquer les libellés des lignes pour masquer les numéros de ligne.
Afficher les noms des lignes
Vous pouvez sélectionner Afficher les noms des lignes pour afficher les noms des lignes à la place des numéros. Dans cet exemple, nous avons quatre lignes avec des noms: left, middle1, middle2 et right.
Dans cette démonstration, l'élément orange s'étend de gauche à droite, avec le code CSS grid-column: left / right.
Afficher les noms des lignes facilite la visualisation des positions de début et de fin de l'élément.
Afficher la taille des pistes
Cochez la case Afficher la taille des pistes pour les afficher dans la grille.
Les outils de développement afficheront [authored size] - [computed size] sur chaque libellé de ligne: taille Créée: taille définie dans la feuille de style (omise si elle n'est pas définie). Taille calculée: taille réelle à l'écran.
Dans cette démonstration, les tailles de colonne snack-box sont définies dans le fichier CSS grid-template-columns:1fr 2fr;.
Par conséquent, les étiquettes des lignes de colonne affichent les tailles créées et calculées: 1fr - 96.66px et 2fr - 193.32px.
Les libellés des lignes de ligne n'affichent que les tailles calculées: 80px et 80px, car aucune taille de ligne n'est définie dans la feuille de style.
Afficher les noms des zones
Pour afficher les noms des zones, cochez la case Afficher les noms des zones. Dans cet exemple, la grille comporte trois zones : top, bottom1 et bottom2.
Étendre les lignes de la grille
Cochez la case Étendre les lignes de la grille pour étendre les lignes de la grille jusqu'au bord de la fenêtre d'affichage le long de chaque axe.
Superpositions de grille
La section Superpositions de grille contient une liste des grilles présentes sur la page, chacune étant associée à une case à cocher, ainsi que diverses options.
Activer les vues en superposition de plusieurs grilles
Vous pouvez activer les vues en superposition de plusieurs grilles. Dans cet exemple, deux superpositions de grille sont activées : main et div.snack-box, chacune représentée par des couleurs différentes.
Personnaliser la couleur de superposition de la grille
Vous pouvez personnaliser la couleur de chaque superposition de grille en cliquant sur le sélecteur de couleur.
Mettre la grille en surbrillance
Cliquez sur l'icône de mise en surbrillance pour mettre immédiatement en surbrillance l'élément HTML, faites défiler la page jusqu'à cet élément et sélectionnez-le dans le panneau "Elements".
