Inspecteur de grille CSS : examiner les grilles

L'inspecteur de grilles permet de trouver, d'examiner, et de modifier les grilles CSS en utilisant les outils de développement de Firefox

Lorsqu'un élément HTML d'une page possède l'attribut display: grid, des fonctionnalités des outils de développement sont activées pour fournir un accès simple aux fonctionnalités des grilles.

Dans l'onglet règles du panneau CSS, toutes les instances d'une déclaration display: grid possèdent une icône de grille () :

Cliquer sur cette icône affiche une grille en superposition sur la page, afin de mettre en évidence la position des lignes et "tracks" de la grille CSS :

La superposition reste affichée même lorsque d'autres éléments sont sélectionnés, il est donc possible d'éditer les propriétés CSS appropriées et en voir les effets sur la grille.

Lorsque des grilles sont incluses dans une page, l'onglet "Mise en page" du panneau CSS inclut une section "Grille", qui contient quelques options pour afficher celles-cis.

La section grille de l'onglet mise en page ressemble à ceci :

Ces options sont :

• Superposer une grille : contient une case à cocher pour chaque grille CSS présente sur la page,ainsi que quelques options . Cela permet de superposer une grille d'indication sur les grilles CSS.
• Paramètres d'affichage des grilles :
  • Afficher le numéro des lignes : affiche le nombre de lignes pour chaque grille d'indication (option activée par défaut).
  • Afficher le nom des zones : active/désactive les noms des zones si la grille possède des noms de zones (activé par défaut quand utile).
  • Prolonger les lignes à l'infini : Par défaut, les lignes/tracks des grilles CSS ne sont affichées que dans l'élément sur lequel display: grid est attaché. Lorsque cette option est activée, les lignes de la grille d'indication se prolongent jusqu'au bord de la fenêtre sur chaque axe.
• Mini vue de grilles : Une vue réduite des grilles actuellement superposées.

Chaque grille présente sur la page, possède son entrée dans la section "superposer une grille" :

Chaque entrée est composée de (de gauche à droite) :

• Une case à cocher permettant d'activer/désactiver la superposition pour cette grille. Il est à noter qu'actuellement, une seule superposition à la fois est possible.
• Un nom pour identifier la grille, il s'agit du sélecteur identifiant l'élément HTML auquel la grille est appliquée. Cliquer sur le nom active/désactive également la superposition.
• Une icône de ciblage, qui sélectionne automatiquement dans l'Inspecteur l'élément HTML auquel la grille est rattachée.
• Un sélecteur de couleur permettant de change la couleur de la superposition. C'est utile pour pouvoir facilement différencier la grille de sa superposition.

Par défaut le numéro des lignes est affiché dans la superposition :

Décocher la case "Afficher les numéros des lignes" les désactivent :

Si une grille possède des noms de zones, ces noms seront automatiquement affichés par défaut dans la superposition :

Décocher la case désactive cet affichage :

Par défaut les lignes/tracks ne sont affichées que dans l'élément sur laquelle la grille est appliquée :

Lorsque cette option est activée, les lignes se prolongent sur chaque axe jusqu'au bord de la fenêtre :

Affiche une version miniature de la superposition de la grile, en proportions correctes de la vraie.

Survoler les différentes zones de la mini grille, affichera en surbrillance la zone correspondante dans la vraie grille et fournira une infobulle avec des informations telles que la taille de la zone, sa ligne et sa colonne.

• labs.jensimmons.com — Plein d'exemples intéressants de l'utilisation des grilles.
• Grid by Example — L'apprentissage des grilles CSS par Rachel Andrew.
• CSS Grid Layout — La référence et les tutoriaux MDN sur les grilles CSS.