Inspecter les dispositions css Grid

Utilisez l’onglet Disposition dans l’outil Éléments pour identifier les grilles CSS sur un site web et déboguer les problèmes de disposition de grille à l’aide de superpositions de grille personnalisables.

Contenu détaillé :

• Afficher la superposition de grille dans une page web rendue
• Aligner les éléments de grille et leur contenu : la fenêtre contextuelle de l’éditeur de grille
• Options d’affichage de la grille
• Paramètres d’affichage de superposition
  • Afficher les numéros de ligne
  • Masquer les étiquettes de ligne
  • Afficher les noms de ligne
  • Afficher les tailles de piste
  • Afficher les noms des zones
  • Étendre les lignes de grille
• Superpositions de grille
  • Activer les vues de superposition de plusieurs grilles
  • Personnaliser la couleur de superposition de grille
  • Mettre en surbrillance l’élément grid dans la page web et l’arborescence DOM
• Voir aussi

Afficher la superposition de grille dans une page web rendue

CSS Grid est un paradigme de disposition puissant pour le web. Une bonne page web pour en savoir plus sur CSS Grid et ses fonctionnalités est la disposition de grille CSS sur MDN.

Pour utiliser la superposition de grille dans une page web rendue :

1. Accédez à une page qui utilise la disposition CSS Grid, telle que la page de démonstration Inspecter les dispositions CSS Grid , dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre, avec l’outil Éléments sélectionné, affichant l’arborescence DOM.

3. Dans l’arborescence DOM, développez body>main.

   Les <div> éléments ont un badge de grille :

   

   Lorsqu’un élément HTML de la page web est display: griddisplay: inline-grid ou appliqué, un badge de grille s’affiche en regard de l’élément dans l’arborescence DOM de l’outil Éléments .

4. Cliquez sur le badge de grille en regard d’un élément, tel que <div class="fruit-box">:

   

   Une superposition de grille s’affiche sur l’élément dans la page web rendue. Le badge de grille passe du texte bleu sur arrière-plan blanc au texte blanc sur arrière-plan bleu.

   Dans la page web rendue, la superposition CSS Grid s’affiche sur une couche devant l’élément de page web. La superposition de grille CSS affiche la position des lignes de grille (lignes et colonnes) et des pistes.

   Si vous cliquez plusieurs fois sur le badge de grille , il s’active et se désactive.

   De même, il existe parfois un badge de sous-réseau . Vous pouvez basculer la superposition de la grille GSS sur une sous-grille, en cliquant sur le badge de la sous-grille . Consultez Subgrid sur MDN.

5. Cliquez sur l’onglet Disposition , qui est regroupé avec l’onglet Styles dans l’outil Éléments :

   

   L’onglet Disposition comprend une section Grid/Grid Lanes , qui comprend :

   • Liste déroulante.
   • Cases à cocher pour les options d’affichage.
   • Case à cocher pour chaque élément qui utilise la disposition CSS Grid.

   Lorsqu’une page web utilise une grille CSS, l’onglet Disposition inclut la section Grid/Grid Lanes . Utilisez la section Grid/Grid Lanes pour configurer les informations à afficher dans les superpositions de grille sur la page web rendue.

Aligner les éléments de grille et leur contenu : la fenêtre contextuelle de l’éditeur de grille

Vous pouvez aligner les éléments de grille CSS et leur contenu en cliquant simplement sur un bouton (pour ouvrir la fenêtre contextuelle de l’éditeur de grille), plutôt que d’avoir à définir directement des règles CSS.

Pour aligner les éléments de grille CSS et leur contenu :

1. Effectuez les étapes décrites dans Afficher la superposition de grille dans une page web rendue, ci-dessus.

   Par conséquent, l’onglet Disposition est sélectionné pour un élément de l’arborescence DOM (par <div class="fruit-box">exemple) qui a un badge de grille .

2. Sélectionnez l’onglet Styles .

3. Recherchez une règle CSS qui a le bouton Ouvrir l’éditeur de grille , comme la .fruit-box règle :

   

4. Dans la règle CSS, en regard de display: grid, cliquez sur le bouton Ouvrir l’éditeur de grille .

   La fenêtre contextuelle de l’éditeur de grille s’ouvre :

   

   La fenêtre contextuelle de l’éditeur de grille contient quatre ensembles de boutons en tant qu’options :

   • align-content
   • justify-content
   • align-items
   • justify-items

   Dans chaque ensemble de boutons, les boutons sont des boutons d’option qui s’excluent mutuellement. Si vous cliquez deux fois sur un bouton d’option, aucun bouton d’option n’est sélectionné dans cet ensemble et la valeur revient à la normale.

5. Dans la fenêtre contextuelle de l’éditeur de grille, dans n’importe quel ensemble de boutons, cliquez sur un bouton. Pour revenir à la normale, cliquez deux fois sur un bouton.

   La couleur de premier plan du bouton passe du noir au bleu, et la valeur passe de normal à la valeur sélectionnée.

   Les éléments de grille et le contenu sont restitués à nouveau dans la fenêtre d’affichage.

Options d’affichage de la grille

La section Grid/Grid Lanes du volet Disposition contient deux sous-sections :

• Paramètres d’affichage de superposition
• Superpositions de grille

Les détails sont ci-dessous.

Paramètres d’affichage de superposition

Dans le volet Disposition de l’outil Élément, dans la section Grid/Grid Lanes extensibles, il y a une sous-section Overlay display settings :

La sous-section Paramètres d’affichage de superposition se compose de deux parties :

• Liste déroulante contenant les commandes suivantes :

  • Masquer les étiquettes de ligne : masquez les étiquettes de ligne pour 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 de ligne : affiche les noms de ligne pour chaque superposition de grille dans le cas de grilles avec des noms de lignes.

• Cases:

  • Afficher les tailles de piste : bascule pour afficher ou masquer les tailles de piste.
  • Afficher les noms des zones : bascule pour afficher ou masquer les noms de zones, dans le cas de grilles avec des zones de grille nommées.
  • Étendre les lignes de grille : par défaut, les lignes de grille ne sont affichées qu’à l’intérieur de l’élément qui a ou display: inline-grid qui est display: grid défini dessus. Lorsque vous activez cette option, les lignes de grille s’étendent jusqu’au bord de la fenêtre d’affichage le long de chaque axe.

Les détails sont ci-dessous.

Afficher les numéros de ligne

Vous pouvez afficher ou masquer des numéros de ligne (lignes et colonnes) dans la superposition de grille dans la page web rendue. Dans la grille CSS, les numéros de ligne sont utilisés pour identifier les lignes verticales et horizontales qui séparent les lignes et les colonnes d’une grille CSS. Ces numéros de ligne ne sont pas destinés aux lignes de code du fichier source HTML.

Pour afficher ou masquer les numéros de ligne (lignes et colonnes) dans la superposition de grille :

1. Effectuez les étapes décrites dans Afficher la superposition de grille dans une page web rendue, ci-dessus.

2. Dans la sous-section Grille/Grille Des>voies d’affichage Sous-section> Paramètres d’affichage de superposition Afficher les étiquettes de ligne liste déroulante, sélectionnez Afficher les numéros de ligne. Cette option est sélectionnée par défaut.

   Les numéros des lignes (lignes et colonnes) de chaque superposition de grille sont affichés :

   

Par défaut, les numéros de ligne positifs et négatifs (lignes et colonnes) sont affichés sur la superposition de grille. Pour plus d’informations sur les nombres négatifs dans la superposition de grille, consultez Comptage à l’arrière dans la disposition de grille à l’aide d’un positionnement basé sur des lignes sur MDN.

Masquer les étiquettes de ligne

Pour masquer les étiquettes de ligne dans la superposition de grille :

1. Effectuez les étapes décrites dans Afficher la superposition de grille dans une page web rendue, ci-dessus.

2. Dans la sous-section >Grille/Grille Des>voies d’affichage De superposition afficher la liste déroulante Afficher les étiquettes de ligne, sélectionnez Masquer les étiquettes de ligne :

   

   Les étiquettes des lignes (lignes/colonnes) sont masquées sur chaque superposition de grille.

Afficher les noms de ligne

Dans la superposition de grille de la page web rendue, vous pouvez afficher les noms de lignes. Cela facilite la visualisation de la position de début et de fin d’un élément.

Pour afficher les noms de lignes dans la superposition de grille :

1. Effectuez les étapes décrites dans Afficher la superposition de grille dans une page web rendue, ci-dessus.

2. Dans la sous-section Grille/Grille Des>voies d’affichage Sous-section>Afficher les étiquettes de ligne , sélectionnez Afficher les noms de lignes :

   

   Les noms de ligne au lieu des nombres sont affichés. Cette option affiche les noms des lignes pour chaque superposition de grille, si des noms sont fournis.

   Dans l’exemple ci-dessus, 4 lignes ont des noms : left, middle1, middle2et right.

   Dans la démonstration, l’élément Orange s’étend de gauche à droite, via grid-column: left les règles CSS et grid-column: right .

Voir aussi :

• Disposition utilisant des lignes de grille nommées sur MDN.

Afficher les tailles de piste

Dans la superposition de grille de la page web rendue, vous pouvez afficher les tailles de piste.

Pour afficher les tailles de piste dans la superposition de grille :

1. Effectuez les étapes décrites dans Afficher la superposition de grille dans une page web rendue, ci-dessus.

2. Sous l’onglet Disposition de l’outil Éléments, dans la section Grid/Grid Lanes, dans la sous-section Superpositions Grid/Grid Lanes, cochez la case pour chaque élément sur lequel afficher la superposition de grille. Par exemple, cochez la case en regard de div.fruit-box et div.snack-box.

3. Dans la sous-section Grid/Grid Lanes> , sous-section Overlay display settings ,cochez la case Show track sizes (Afficher les tailles de piste) :

   

Chaque étiquette de ligne affiche le authored size (s’il est défini dans le CSS) et le computed size:

Taille	Détails
authored size	Taille définie dans la feuille de style CSS. Omis de l’étiquette, s’il n’est pas défini.
computed size	Taille réelle à l’écran.

Dans la démonstration, les tailles de colonne sont définies comme suit, dans la propriété grid-template-columnsCSS :

.fruit-box {
  display: grid;
  grid-template-columns: [left] 1fr [middle1] 1fr [middle2] 1fr [right];
  ...
}

.snack-box {
  display: grid;
  grid-template-columns: 1fr 2fr;
  ...
}

Étiquettes de colonne :

Les étiquettes de ligne track-size suivantes sont affichées sur les colonnes de grille, pour l’élément <div class="snack-box">de la démonstration :

Taille du suivi	Taille créée	Taille calculée
1fr • 96,66 px	1fr	96,66 px
2fr • 193.34px	2fr	193.34px

Si l’affichage de votre ordinateur est défini sur une densité de pixels différente, la démonstration peut produire des valeurs différentes, telles que deux fois moins de pixels.

L’étiquette de ligne sur chaque colonne de grille affiche en authored size plus de , computed sizecar les tailles de colonne ont été créées (spécifiées), dans la propriété grid-template-columns CSS de la feuille de style CSS.

Étiquettes de ligne :

Les étiquettes de ligne track-size suivantes sont affichées sur les lignes de grille, pour l’élément <div class="snack-box">de la démonstration :

Taille du suivi	Taille créée	Taille calculée
80 px	s/o	80 px
80 px	s/o	80 px

Si l’affichage de votre ordinateur est défini sur une densité de pixels différente, la démonstration peut produire des valeurs différentes, telles que deux fois moins de pixels.

L’étiquette de ligne sur chaque ligne de grille n’affiche pas de authored size, uniquement le computed size, car les tailles de ligne n’ont pas été créées (spécifiées) dans la propriété grid-template-rows CSS de la feuille de style CSS.

Voir aussi :

• grid-template-columns sur MDN.
• grid-template-rows sur MDN.

Afficher les noms des zones

Dans la superposition de grille de la page web rendue, vous pouvez afficher les noms de zone, tels que top, bottom1 et bottom2.

Pour afficher les noms de zone :

1. Effectuez les étapes décrites dans Afficher la superposition de grille dans une page web rendue, ci-dessus.

2. Dans la sous-section Paramètres d’affichage de la section >Grille/Grille, cochez la case Afficher les noms des zones :

   

Étendre les lignes de grille

Vous pouvez étendre les lignes de grille de la superposition de grille au bord de la fenêtre d’affichage, le long de chaque axe.

Pour étendre les lignes de grille :

1. Effectuez les étapes décrites dans Afficher la superposition de grille dans une page web rendue, ci-dessus.

2. Dans la sous-section Paramètres d’affichage de la section >Grille/ Grille, cochez la case Étendre les lignes de grille :

   

Superpositions de grille

Sous l’onglet Disposition de l’outil Éléments (regroupé avec l’onglet Styles), la section Superpositions Grid/Grid Lanes contient une liste d’éléments qui ont une grille CSS. Chaque grille comporte une case à cocher, ainsi que différentes options.

Activer les vues de superposition de plusieurs grilles

Pour activer les vues de superposition de plusieurs grilles :

1. Effectuez les étapes décrites dans Afficher la superposition de grille dans une page web rendue, ci-dessus.

2. Dans la sous-section >Grille / Grille Lanes de grille / Sous-section Superpositions de voies de grille, cochez la case en regard de chaque nom de plusieurs grilles :

   

   Une superposition de grille CSS s’affiche pour chaque élément sélectionné qui a une grille CSS. Dans l’exemple ci-dessus, trois superpositions de grille sont activées. Chaque grille CSS a une couleur différente dans la page web rendue :

   • body - la superposition de grille d’or.
   • div.fruit-box - la superposition de grille rose.
   • div.snack-box : superposition de grille bleue.

Personnaliser la couleur de superposition de grille

Pour personnaliser la couleur de superposition de grille :

1. Effectuez les étapes décrites dans Afficher la superposition de grille dans une page web rendue, ci-dessus.

2. Dans la sous-section >Grid/Grid Lanesoverlays grid/Grid Lanes, cliquez sur la zone Choisir la couleur de superposition de cet élément en regard d’un nom d’élément :

   

   Le sélecteur de couleurs s’ouvre.

Voir aussi :

• Modifiez les couleurs avec la référence des fonctionnalités du sélecteur de couleurs dans CSS.

Mettre en surbrillance l’élément grid dans la page web et l’arborescence DOM

Pour tout élément qui a une disposition de grille CSS, vous pouvez faire défiler automatiquement jusqu’à l’élément dans la page web rendue et sélectionner automatiquement l’élément dans l’arborescence DOM.

Pour faire défiler jusqu’à un élément grid-using dans la page web et sélectionner l’élément dans l’arborescence DOM :

1. Effectuez les étapes décrites dans Afficher la superposition de grille dans une page web rendue, ci-dessus.

2. Dans la section >Grid/ Grid Lanes sous-section Superpositions Grid/Grid Lanes, cliquez sur l’élément Show dans le panneau Éléments () en regard d’un nom d’élément :

   

   • La page web rendue fait défiler jusqu’à l’élément qui utilise la disposition de grille CSS, et l’élément est brièvement mis en surbrillance dans la page web rendue.

   • Dans l’outil Éléments , l’arborescence DOM défile automatiquement jusqu’à l’élément et l’élément est sélectionné.

   Ce défilement et cette mise en surbrillance automatiques fonctionnent, que la case à cocher de l’élément soit sélectionnée ou désactivée.

Voir aussi

Pages web de démonstration :

• Inspecter les dispositions css Grid

MDN :

• Disposition de la grille CSS
  • Disposition de grille utilisant le placement basé sur les lignes
  • Disposition utilisant des lignes de grille nommées
• grid-template-columns
• grid-template-rows

Remarque

Les parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisées conformément aux termes décrits dans la licence internationale Creative Commons Attribution 4.0. La page d’origine se trouve ici et est créée par Jecelyn Yeen.

Cette œuvre est concédée sous licence creative commons attribution 4.0 international.