L'inspecteur de grilles permet de trouver, d'examiner, et de modifier les grilles CSS en utilisant les outils de développement de Firefox
Note: Les exemples montrés dans les captures d'écran ci-dessous sont tirés de Futurismo (Jen Simmons), des expériences "Variations on a grid", et de "live named grid area example" (Rachel Andrew).
Découvrir les grilles CSS
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 le panneau HTML
Dans le panneau CSS
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.
La section "grilles" de l'onglet mise en page
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.
Note: La vue "Mise en page" se situe dans le panneau de droite de l'Inspecteur. Les captures d'écran au-dessus et en dessous devraient aider à sa localisation.
Options de grilles
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: gridest 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.
Note: Les préférences de grilles telles que la couleur de superposition et les paramètres d'affichage persistent au rechargement des pages (chacun sur sa page séparée).
Grille de superposition
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.
Afficher le numéro des lignes
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 :
Afficher le nom des zones
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 :
Prolonger les lignes à l'infini
Par défaut les lignes/tracks ne sont afficher 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 :
Mini vue de la grille
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.
À voir également
- 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.