1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
---
title: "Inspecteur de grille CSS\_: examiner les grilles"
slug: Outils/Inspecteur/Comment/Examine_grid_layouts
translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts
---
<div>{{ToolsSidebar}}</div>
<p class="summary"><strong>L'inspecteur de grilles</strong> permet de trouver, d'examiner, et de modifier les <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">grilles CSS</a> en utilisant les outils de développement de Firefox</p>
<div class="note">
<p><strong>Note</strong>: Les exemples montrés dans les captures d'écran ci-dessous sont tirés de <a href="http://labs.jensimmons.com/2016/examples/futurismo-1.html">Futurismo</a> (Jen Simmons), des expériences "<a href="http://labs.jensimmons.com/2017/01-003.html">Variations on a grid"</a>, et de "<a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Naming_a_grid_area">live named grid area example</a>" (Rachel Andrew).</p>
</div>
<h2 id="Découvrir_les_grilles_CSS">Découvrir les grilles CSS</h2>
<p>Lorsqu'un élément HTML d'une page possède l'attribut <code><a href="/fr/docs/Web/CSS/display">display: grid</a></code>, des fonctionnalités des outils de développement sont activées pour fournir un accès simple aux fonctionnalités des grilles.</p>
<h3 id="Dans_le_panneau_HTML">Dans le panneau HTML</h3>
<p><img alt="Le panneau HTML, montrant un marqueur de grille" src="https://mdn.mozillademos.org/files/15977/html-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 400px;"></p>
<h3 id="Dans_le_panneau_CSS">Dans le panneau CSS</h3>
<p>Dans l'onglet règles du <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panneau CSS</a>, toutes les instances d'une déclaration <code><a href="/fr/docs/Web/CSS/display">display: grid</a></code> possèdent une icône de grille (<img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">) :</p>
<p><img alt="The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid" src="https://mdn.mozillademos.org/files/15978/css-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 399px; margin: 0px auto; width: 1146px;"></p>
<p>Cliquer sur cette icône affiche une grille en superposition sur la page, afin de mettre en évidence la position des lignes et "<em>tracks</em>" de la grille CSS :</p>
<p><img alt="Une superposition en couleur de la grille CSS" src="https://mdn.mozillademos.org/files/15979/grid-overlay.png" style="border-style: solid; border-width: 1px; display: block; height: 1383px; margin: 0px auto; width: 1842px;"></p>
<p>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.</p>
<h3 id="La_section_grilles_de_longlet_mise_en_page">La section "grilles" de l'onglet mise en page</h3>
<p>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.</p>
<div class="note">
<p><strong>Note</strong>: 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.</p>
</div>
<h2 id="Options_de_grilles">Options de grilles</h2>
<p>La section grille de l'onglet mise en page ressemble à ceci :<img alt="Les options des grilles CSS" src="https://mdn.mozillademos.org/files/15980/grid-options.png" style="border-style: solid; border-width: 1px; display: block; height: 408px; margin: 0px auto; width: 500px;"></p>
<p>Ces options sont :</p>
<ul>
<li>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.</li>
<li>Paramètres d'affichage des grilles :
<ul>
<li>Afficher le numéro des lignes : affiche le nombre de lignes pour chaque grille d'indication (option activée par défaut).</li>
<li>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).</li>
<li>Prolonger les lignes à l'infini : Par défaut, les lignes/<em>tracks</em> des grilles CSS ne sont affichées que dans l'élément sur lequel <code>display: grid</code> 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.</li>
</ul>
</li>
<li>Mini vue de grilles : Une vue réduite des grilles actuellement superposées.</li>
</ul>
<div class="note">
<p><strong>Note</strong>: 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).</p>
</div>
<h3 id="Grille_de_superposition">Grille de superposition</h3>
<p>Chaque grille présente sur la page, possède son entrée dans la section "superposer une grille" :</p>
<p><img alt="Une entrée pour une seule grille de superposition affichant son nom, sa couleur, et plus" src="https://mdn.mozillademos.org/files/15981/overlay-grid-entry.png" style="border-style: solid; border-width: 1px; display: block; height: 37px; margin: 0px auto; width: 300px;"></p>
<p>Chaque entrée est composée de (de gauche à droite) :</p>
<ul>
<li>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.</li>
<li>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.</li>
<li>Une icône de ciblage, qui sélectionne automatiquement dans l'Inspecteur l'élément HTML auquel la grille est rattachée.</li>
<li>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.</li>
</ul>
<h3 id="Afficher_le_numéro_des_lignes">Afficher le numéro des lignes</h3>
<p>Par défaut le numéro des lignes est affiché dans la superposition :</p>
<p><img alt="Une superposition de grille CSS avec les numéros de lignes affichés" src="https://mdn.mozillademos.org/files/15982/line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 582px; margin: 0px auto; width: 600px;"></p>
<p>Décocher la case "Afficher les numéros des lignes" les désactivent :</p>
<p><img alt="A CSS grid overlay with grid line numbers not displayed" src="https://mdn.mozillademos.org/files/15983/no-line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 580px; margin: 0px auto; width: 600px;"></p>
<h3 id="Afficher_le_nom_des_zones">Afficher le nom des zones</h3>
<p>Si une grille possède des noms de zones, ces noms seront automatiquement affichés par défaut dans la superposition :</p>
<p><img alt="A CSS grid overlay with named area names displayed" src="https://mdn.mozillademos.org/files/15984/grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 777px; margin: 0px auto; width: 1396px;"></p>
<p>Décocher la case désactive cet affichage :</p>
<p><img alt="A CSS grid overlay with named area names not displayed" src="https://mdn.mozillademos.org/files/15990/no-grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 788px; margin: 0px auto; width: 1400px;"></p>
<h3 id="Prolonger_les_lignes_à_linfini">Prolonger les lignes à l'infini</h3>
<p>Par défaut les lignes/<em>tracks </em>ne sont affichées que dans l'élément sur laquelle la grille est appliquée :</p>
<p><img alt="A CSS grid overlay with grid lines not extended infinitely" src="https://mdn.mozillademos.org/files/15987/no-extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 499px; margin: 0px auto; width: 1000px;"></p>
<p>Lorsque cette option est activée, les lignes se prolongent sur chaque axe jusqu'au bord de la fenêtre :</p>
<p><img alt="A CSS grid overlay with grid lines extended infinitely" src="https://mdn.mozillademos.org/files/15986/extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 501px; margin: 0px auto; width: 1000px;"></p>
<h3 id="Mini_vue_de_la_grille">Mini vue de la grille</h3>
<p>Affiche une version miniature de la superposition de la grile, en proportions correctes de la vraie.</p>
<p><img alt="A mini CSS grid view from the Firefox DevTools" src="https://mdn.mozillademos.org/files/15988/mini-grid-view.png" style="border-style: solid; border-width: 1px; display: block; height: 246px; margin: 0px auto; width: 600px;"></p>
<p>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.</p>
<p><img alt="A Firefox screenshot showing an area of a mini CSS grid being highlighted in the DevTools, and the corresponding area in the real grid being highlighted on the web page." src="https://mdn.mozillademos.org/files/15989/mini-grid-highlight.png" style="border-style: solid; border-width: 1px; display: block; height: 793px; margin: 0px auto; width: 1200px;"></p>
<h2 id="À_voir_également">À voir également</h2>
<ul>
<li><a href="http://labs.jensimmons.com/">labs.jensimmons.com</a> — Plein d'exemples intéressants de l'utilisation des grilles.</li>
<li><a href="https://gridbyexample.com/">Grid by Example</a> — L'apprentissage des grilles CSS par Rachel Andrew.</li>
<li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> — La référence et les tutoriaux MDN sur les grilles CSS.</li>
</ul>
|
