-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
535 lines (442 loc) · 17.2 KB
/
index.md
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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
---
title: Le placement automatique sur une grille CSS
slug: Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout
l10n:
sourceCommit: b906098e63b1eb3512b4381fe7c105b67037aff1
---
{{CSSRef}}
En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains (voire aucun) des objets ne sont pas placés sur la grille. Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets.
## Placement automatique
Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille.
```css hidden
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
```
```css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
```
```html
<div class="wrapper">
<div>Un</div>
<div>Deux</div>
<div>Trois</div>
<div>Quatre</div>
<div>Cinq</div>
</div>
```
{{EmbedLiveSample('', '500', '230')}}
## Les règles par défaut pour le placement automatique
Comme on peut le voir dans l'exemple précédent, si on crée une grille sans définir de placement, tous les objets se placeront chacun sur une cellule de la grille. Par défaut, les objets sont placés au fur et à mesure sur les lignes horizontales de la grille. Si on a créé des lignes supplémentaires avec `grid-template-rows`, les objets suivants seront placés sur ces lignes. En revanche, si la grille ne possède pas suffisamment de lignes sur la grille explicite, de nouvelles lignes, _implicites_, seront créées.
### Dimensionner les lignes de la grille implicite
Par défaut, les lignes implicites créées automatiquement ont une taille automatique. Autrement dit, elles seront dimensionnées pour contenir les éléments qu'elles doivent placer sans que ceux-ci dépassent.
Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété `grid-auto-rows`. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera :
```css hidden
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
```
```html
<div class="wrapper">
<div>Un</div>
<div>Deux</div>
<div>Trois</div>
<div>Quatre</div>
<div>Cinq</div>
</div>
```
```css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: 100px;
}
```
{{EmbedLiveSample('', '500', '330')}}
### Dimensionner les lignes avec `minmax()`
On peut utiliser la fonction [`minmax()`](/fr/docs/Web/CSS/minmax) pour la valeur de [`grid-auto-rows`](/fr/docs/Web/CSS/grid-auto-rows) afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale.
```css hidden
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
```
```html
<div class="wrapper">
<div>Un</div>
<div>Deux</div>
<div>Trois</div>
<div>
Quatre <br />Cette cellule <br />a du contenu <br />supplémentaire <br />et
max vaut auto <br />afin que la ligne <br />se développe.
</div>
<div>Five</div>
</div>
```
```css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
```
{{EmbedLiveSample('', '500', '330')}}
### Dimensionner les lignes avec une liste de pistes
On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de 200 pixels. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.
```css hidden
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
```
```html
<div class="wrapper">
<div>Un</div>
<div>Deux</div>
<div>Trois</div>
<div>Quatre</div>
<div>Cinq</div>
<div>Six</div>
<div>Sept</div>
<div>Huit</div>
</div>
```
```css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: 100px 200px;
}
```
{{EmbedLiveSample('', '500', '480')}}
### Utiliser le placement automatique avec les colonnes
On peut également paramétrer la grille pour que les objets soient placés automatiquement en suivant les colonnes de la grille. Pour obtenir ce résultat, on utilisera la propriété [`grid-auto-flow`](/fr/docs/Web/CSS/grid-auto-flow) avec la valeur `column`. Dans ce cas, la grille ajoutera les objets dans les lignes verticales définies avec [`grid-template-rows`](/fr/docs/Web/CSS/grid-template-rows). Lorsqu'une colonne sera pleine, les prochains objets seront placés dans la colonne explicite suivante ou dans une colonne implicite créée automatiquement s'il n'y a plus assez de colonnes explicites. La taille des pistes pour les colonnes implicites peut être définie avec [`grid-auto-columns`](/fr/docs/Web/CSS/grid-auto-columns), cette dernière fonctionne de façon analogue à [`grid-auto-rows`](/fr/docs/Web/CSS/grid-auto-rows).
Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent chacune 200 pixels de haut. On utilise le placement automatique en colonne. La première colonne qui sera créée mesurera 300 pixels de large, ensuite on aura une colonne de 100 pixels de large et ainsi de suite jusqu'à ce que tous les éléments puissent être placés.
```css
.wrapper {
display: grid;
grid-template-rows: repeat(3, 200px);
grid-gap: 10px;
grid-auto-flow: column;
grid-auto-columns: 300px 100px;
}
```
```css hidden
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
```
```html
<div class="wrapper">
<div>Un</div>
<div>Deux</div>
<div>Trois</div>
<div>Quatre</div>
<div>Cinq</div>
<div>Six</div>
<div>Sept</div>
<div>Huit</div>
</div>
```
{{EmbedLiveSample('', '500', '640')}}
## L'ordre des éléments placés automatiquement
Une grille peut contenir un mélange d'éléments. Certains éléments peuvent avoir une position définie et d'autres être placés automatiquement. Ce placement automatique peut s'avérer utile lorsque l'ordre des éléments dans le document est celui qu'on veut utiliser pour organiser la grille : il n'y a alors pas besoin d'écrire de règles CSS pour positionner les éléments un par un. La spécification détaille exhaustivement [l'algorithme de placement des objets sur la grille](https://drafts.csswg.org/css-grid/#auto-placement-algo), mais voyons ici les quelques règles simples qu'il faut principalement retenir.
### Modification de l'ordre du document
Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section _« <i lang="en">order modified document order</i> »_. Cela signifie que si on utilise uniquement la propriété `order`, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source.
### Les éléments avec des propriétés de placement
La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On peut voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM, ils ne commencent pas après la position d'un élément placé qui les précède.
```css hidden
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
```
```html
<div class="wrapper">
<div>Un</div>
<div>Deux</div>
<div>Trois</div>
<div>Quatre</div>
<div>Cinq</div>
<div>Six</div>
<div>Sept</div>
<div>Huit</div>
<div>Neuf</div>
<div>Dix</div>
<div>Onze</div>
<div>Douze</div>
</div>
```
```css
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
grid-gap: 10px;
}
.wrapper div:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
```
{{EmbedLiveSample('', '500', '450')}}
### Gérer les éléments qui s'étalent sur plusieurs pistes
On peut utiliser les propriétés de placement tout en tirant parti du placement automatique. Dans le prochain exemple, on complète la disposition en indiquant que les éléments 1, 5 et 9 (4n+1) doivent occuper deux pistes, pour les colonnes et pour les lignes. Pour obtenir ce résultat, on utilise les propriétés [`grid-column-end`](/fr/docs/Web/CSS/grid-column-end) et [`grid-row-end`](/fr/docs/Web/CSS/grid-row-end) avec la valeur `span 2`. La ligne de début sera déterminée automatiquement et la ligne de fin sera deux pistes plus loin.
On peut voir comment cela laisse des espaces dans la grille, car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place.
```css hidden
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
```
```html
<div class="wrapper">
<div>Un</div>
<div>Deux</div>
<div>Trois</div>
<div>Quatre</div>
<div>Cinq</div>
<div>Six</div>
<div>Sept</div>
<div>Huit</div>
<div>Neuf</div>
<div>Dix</div>
<div>Onze</div>
<div>Douze</div>
</div>
```
```css
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
grid-gap: 10px;
}
.wrapper div:nth-child(4n + 1) {
grid-column-end: span 2;
grid-row-end: span 2;
background-color: #ffa94d;
}
.wrapper div:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
```
{{EmbedLiveSample('', '500', '770')}}
### Combler les espaces
En dehors des éléments placés explicitement, la grille place les éléments automatiques en respectant l'ordre du DOM. C'est généralement le résultat qu'on souhaite lorsqu'on met en forme un document comme un formulaire (on ne voudrait pas que les libellés et les champs soient mélangés pour combler certains trous). Toutefois, on dispose parfois des éléments pour lesquels l'ordre logique n'a pas d'importance et où on veut obtenir une disposition plus dense, sans vide entre les différents éléments.
Pour cela, sur le conteneur, on ajoute la propriété [`grid-auto-flow`](/fr/docs/Web/CSS/grid-auto-flow) avec la valeur `dense`. C'est la même propriété qu'on utilise pour modifier l'ordre du flux avec `column`. On peut aussi obtenir une disposition dense, rangée par colonne en utilisant les deux valeurs pour la propriété : `grid-auto-flow: column dense`.
Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés, quitte à ne pas respecter l'ordre du DOM. Cela ne modifiera pas l'ordre logique des éléments. Par exemple, l'ordre de la navigation au clavier suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans [un article sur l'accessibilité](/fr/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility). Pour résumer, il faut faire attention quand on détache l'ordre visuel de l'ordre d'affichage.
```css hidden
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
```
```html
<div class="wrapper">
<div>Un</div>
<div>Deux</div>
<div>Trois</div>
<div>Quatre</div>
<div>Cinq</div>
<div>Six</div>
<div>Sept</div>
<div>Huit</div>
<div>Neuf</div>
<div>Dix</div>
<div>Onze</div>
<div>Douze</div>
</div>
```
```css
.wrapper div:nth-child(4n + 1) {
grid-column-end: span 2;
grid-row-end: span 2;
background-color: #ffa94d;
}
.wrapper div:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
grid-gap: 10px;
grid-auto-flow: dense;
}
```
{{EmbedLiveSample('', '500', '730')}}
### Les éléments anonymes de la grille
Dans la spécification, on utilise le concept d'élément anonyme. Ces éléments sont ceux qui sont créés lorsqu'on a une chaîne de caractères dans le conteneur de la grille et que celle-ci n'est pas contenue dans un autre élément. Dans l'exemple ci-après, on a trois éléments sur la grille :
- Le premier est un élément anonyme, car il n'est placé dans aucun élément, il sera alors placé automatiquement.
- Les deux éléments suivants sont placés dans des `div` et peuvent être placés automatiquement ou grâce à une autre méthode de positionnement.
```html
<div class="grid">
Je suis une chaîne de caractères et je serai placée automatiquement.
<div>Un élément de la grille</div>
<div>Un élément de la grille</div>
</div>
```
Les éléments anonymes sont toujours placés automatiquement, car on ne peut pas les cibler autrement. Aussi, si on a du texte sans balise dans la grille, il faut se rappeler que celui-ci peut être placé à un endroit imprévu du fait des règles de placement automatique.
### Les cas d'utilisation pour le placement automatique
Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe `landscape` l'élément s'étend sur deux colonnes). On utilise ensuite `grid-auto-flow: dense` afin de créer une grille dense.
Dans l'exemple qui suit, retirez la ligne `grid-auto-flow: dense` pour voir la réorganisation du contenu et les espaces que cela crée.
{{EmbedGHLiveSample("css-examples/grid/docs/autoplacement.html", '100%', 1200)}}
Le placement automatique peut également aider lorsqu'on dispose des éléments d'interface sans ordre logique. Dans l'exemple qui suit, on a une liste de définitions. Dans une telle liste, rien ne regroupe particulièrement plusieurs éléments `<dt>` et `<dd>`. Ici, on autorise le placement automatique tout en utilisant des classes pour que les `<dt>` soient dans la colonne 1 et les `<dd>` dans la colonne 2. On s'assure ainsi que les termes et leurs définitions seront bien l'un en face de l'autre, quel que soit le nombre de définitions pour un terme.
```css hidden
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
```
```html
<div class="wrapper">
<dl>
<dt>Mammifères</dt>
<dd>Chat</dd>
<dd>Chien</dd>
<dd>Souris</dd>
<dt>Poisson</dt>
<dd>Poisson rouge</dd>
<dt>Oiseaux</dt>
<dd>Bergeronnette</dd>
<dd>Hiboux</dd>
<dl>
</div>
```
```css
dl {
display: grid;
grid-template-columns: auto 1fr;
max-width: 300px;
margin: 1em;
line-height: 1.4;
}
dt {
grid-column: 1;
font-weight: bold;
}
dd {
grid-column: 2;
}
```
{{EmbedLiveSample('', '500', '230')}}
## Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ?
Certaines questions se posent encore. Actuellement on ne peut pas cibler toutes les autres cellules de la grille. On ne peut pas non plus définir une règle pour « placer tous les éléments automatiquement après la prochaine ligne intitulée `n` » (pour que certaines lignes soient sautées). Cette question [est décrite sur le dépôt GitHub du CSSWG](https://github.com/w3c/csswg-drafts/issues/796), n'hésitez pas à ajouter vos exemples de scénarios.
Si vous rencontrez des cas d'utilisation problématiques avec le placement automatique et les grilles, vous pouvez consulter les <i lang="en">issues</i> existantes et les compléter ou ajouter les vôtres. Cela permettra que les prochaines versions de la spécification soient meilleures.