Ce guide vous explique comment découvrir les grilles CSS d'une page, les examiner et résoudre les problèmes de mise en page dans le panneau Elements (É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: Fruit box et Snack box.
Découvrir les grilles CSS
Lorsqu'un élément 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 grille en superposition sur la page. La superposition apparaît sur l'élément, disposée comme une grille pour afficher la position de ses lignes et de ses pistes de grille:
Ouvrez le volet Mise en page. Lorsque des grilles sont incluses sur une page, le volet "Mise en page" inclut une section Grille contenant un certain nombre d'options permettant d'afficher ces grilles.
Aligner des é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 sur un bouton au lieu de saisir des règles CSS.
Pour aligner des éléments de 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 de grille et le contenu 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 de la superposition
- Superpositions de grille
Examinons en détail chacune de ces sous-sections.
Paramètres d'affichage de la superposition
Les paramètres d'affichage de la superposition comprennent deux parties:
a. Un menu déroulant proposant les options suivantes:
- Masquer les libellés des lignes: masquez les libellés de ligne pour chaque superposition de grille.
- Afficher les numéros de ligne: affiche les numéros de lignes pour chaque superposition de grille (sélectionnée par défaut).
- Show line names (Afficher les noms des lignes) : affiche les noms des lignes pour chaque superposition de grille dans le cas de grilles contenant des noms de ligne.
b. Cases à cocher contenant des options:
- Afficher la taille des pistes: activez cette option pour afficher ou masquer la taille des pistes.
- Afficher les noms de zone: activez cette option pour afficher ou masquer les noms des zones, dans le cas de grilles comportant des zones de grille nommées.
- Prolonger les lignes de la grille: par défaut, les lignes de la grille ne s'affichent qu'à l'intérieur de l'élément avec
display: gridoudisplay: inline-griddéfini. 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 grille.
Masquer les libellés de ligne
Sélectionnez Masquer les libellés des lignes pour masquer les numéros de lignes.
Afficher le nom des lignes
Vous pouvez sélectionner Afficher les noms des lignes pour afficher les noms des lignes au lieu des chiffres. 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 CSS grid-column: left / right.
L'affichage des noms de ligne facilite la visualisation de la position de début et de fin de l'élément.
Afficher la taille des pistes
Cochez la case Show track size (Afficher les tailles des pistes) pour afficher les tailles des pistes de la grille.
Les outils de développement afficheront [authored size] - [computed size] dans chaque libellé de ligne. Taille Créée : taille définie dans la feuille de style (omise si elle n'est pas définie). 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 de ligne de colonne indiquent à la fois les tailles créées et calculées: 1fr - 96.66px et 2fr - 193.32px.
Les libellés de ligne 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 la liste des grilles présentes sur la page, chacune avec une case à cocher, ainsi que différentes options.
Activer les vues de superposition de plusieurs grilles
Vous pouvez activer les vues de superposition de plusieurs grilles. Dans cet exemple, deux superpositions de grille sont activées : main et div.snack-box, chacune étant représentée par des couleurs différentes.
Personnaliser la couleur de la superposition de la grille
Vous pouvez personnaliser chaque couleur de superposition de la grille en cliquant sur le sélecteur de couleurs.
Mettre la grille en surbrillance
Cliquez sur l'icône de mise en surbrillance pour mettre immédiatement l'élément HTML en surbrillance. Faites défiler la page jusqu'à cet élément, puis sélectionnez-le dans le panneau "Éléments".
