files/fr/glossary/grid_lines/index.html


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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180

---
title: Ligne de grille (line)
slug: Glossary/Grid_Lines
tags:
  - CSS
  - Glossaire
  - Grilles
translation_of: Glossary/Grid_Lines
original_slug: Glossaire/Lignes_de_grille_(lines)
---
<p>Les <strong>lignes de grille</strong> sont créées avec la définition  des {{glossary("Grid Tracks", "pistes")}} (<em>tracks</em>) dans la grille explicite pour <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout">une grille CSS</a>. Dans l'exemple suivant, est présentée une grille qui a 3 pistes de colonnes et 2 pistes de lignes. <span id="result_box" lang="fr"><span>Cela nous donne 4 lignes de colonnes <em>(column lines</em>) et 3 lignes de lignes <em>(row lines)</em>.</span></span></p>

<div id="example_1">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 100px);
}

.wrapper &gt; div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
</pre>
</div>

<pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div&gt;One&lt;/div&gt;
   &lt;div&gt;Two&lt;/div&gt;
   &lt;div&gt;Three&lt;/div&gt;
   &lt;div&gt;Four&lt;/div&gt;
   &lt;div&gt;Five&lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}
</pre>

<p>{{ EmbedLiveSample('example_1', '500', '250') }}</p>

<p><span id="result_box" lang="fr"><span>Les lignes peuvent être adressées en utilisant leur numéro de ligne.</span> <span>Dans une langue de gauche à droite telle que l'anglais, la ligne de colonne 1 sera sur la gauche de la grille, la ligne de ligne 1 en haut.</span> <span>Les chiffres des lignes respectent le</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_%C3%A9criture">mode d'écriture</a> du document et <span id="result_box" lang="fr"><span>ainsi, dans une langue écrite de droite à gauche par exemple, la ligne de colonne 1 sera sur la droite de la grille.</span> <span>L'image ci-dessous montre les numéros de ligne de la grille, en supposant que la langue est écrite de gauche à droite.</span></span></p>

<p><img alt="Diagram showing the grid with lines numbered." src="https://mdn.mozillademos.org/files/14763/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p>
</div>

<p><span id="result_box" lang="fr"><span>Les lignes sont également créées dans la grille implicite lorsque des pistes implicites sont créées pour contenir les éléments placés en dehors de la grille explicite, mais ces lignes ne peuvent pas être adressées avec un nombre.</span></span></p>

<h2 id="Placement_des_éléments_sur_la_grille_par_numéro_de_ligne">Placement des éléments sur la grille par numéro de ligne</h2>

<p><span id="result_box" lang="fr"><span>Après avoir créé une grille, vous pouvez placer des éléments sur la grille par numéro de ligne.</span> <span>Dans l'exemple suivant, l'élément est positionné de la ligne de colonne 1 à la ligne de colonne 3 et de la ligne de ligne 1 à la ligne de ligne 3.</span></span></p>

<div id="example_2">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 100px);
}

.wrapper &gt; div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
</pre>
</div>

<pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div class="item"&gt;Item&lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}
.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
</pre>

<p>{{ EmbedLiveSample('example_2', '500', '250') }}</p>
</div>

<h2 id="Nommage_des_lignes">Nommage des lignes</h2>

<p><span id="result_box" lang="fr"><span>Les lignes créées dans la grille explicite peuvent être nommées, en ajoutant le nom entre crochets avant ou après les informations de dimensionnement de la piste.</span> <span>Lorsque vous placez un objet, vous pouvez utiliser ces noms à la place du numéro de ligne, comme illustré ci-dessous.</span></span></p>

<div id="example_3">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 100px);
}

.wrapper &gt; div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
</pre>
</div>

<pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div class="item"&gt;Item&lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">.wrapper {
  display: grid;
  grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
  grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
}
.item {
  grid-column-start: col1-start;
  grid-column-end: col3-start;
  grid-row-start: row1-start;
  grid-row-end: rows-end;
}
</pre>

<p>{{ EmbedLiveSample('example_3', '500', '250') }}</p>
</div>

<h2 id="En_apprendre_plus">En apprendre plus</h2>

<h3 id="Références_de_propriété">Références de propriété</h3>

<ul>
 <li>{{cssxref("grid-template-columns")}}</li>
 <li>{{cssxref("grid-template-rows")}}</li>
 <li>{{cssxref("grid-column-start")}}</li>
 <li>{{cssxref("grid-column-end")}}</li>
 <li>{{cssxref("grid-column")}}</li>
 <li>{{cssxref("grid-row-start")}}</li>
 <li>{{cssxref("grid-row-end")}}</li>
 <li>{{cssxref("grid-row")}}</li>
</ul>

<h3 id="Further_reading">Further reading</h3>

<ul>
 <li>Guide des grilles CSS : <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Les concepts de base des grilles CSS</a></em></li>
 <li>Guide des grilles CSS : <em><a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_%C3%A9l%C3%A9ments_sur_les_lignes_d_une_grille_CSS">Places les éléments sur les lignes d'une grille CSS</a></em></li>
 <li>Guide des grilles CSS : <em><a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nomm%C3%A9es_sur_une_grille">Utiliser des lignes nommées sur une grille</a></em></li>
 <li>Guide des grilles CSS : <em><a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_%C3%A9criture">Les grilles CSS, valeurs logiques et modes d'écriture</a></em></li>
 <li><a href="https://drafts.csswg.org/css-grid/#grid-line-concept">Définition des lignes de grille dans la spécification des grilles CSS</a></li>
</ul>