blob: 249e8fa8982bdd4e35d842c7b67b587080fffed6 (
plain)
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
|
---
title: Envelopper une grille
slug: Web/CSS/Layout_cookbook/Grid_wrapper
tags:
- CSS
- Guide
- Recette
translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
---
<div>{{CSSRef}}</div>
<p>Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.</p>
<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
<p>Les éléments placés sur la grille devraient pouvoir être alignés au centre et/ou sur les bords.</p>
<h2 id="Recette">Recette</h2>
<p>{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}</p>
<div class="note">
<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html">Télécharger cet exemple</a>.</p>
</div>
<h2 id="Choix_effectués">Choix effectués</h2>
<p>Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}.</p>
<p>Les deux colonnes extérieures ont une taille maximale de <code>1fr</code>, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.</p>
<h2 id="Méthodes_de_recours_ou_alternatives">Méthodes de recours ou alternatives</h2>
<p>Si cette recette est utilisée pour une page entière, il peut s'avérer utile de définir <code>max-width</code> et des marges horzontales avec <code>auto</code> afin que le contenu soit centré horizontalement :</p>
<pre class="brush: css">.grid {
max-width: 1200px;
margin: 0 auto; // on centre le conteneur en horizontal
display: grid;
/* Other grid code goes here */
}
/* On retire max-width et les marges si le navigateur */
/* prend en charge les grilles */
@supports (display: grid) {
.grid {
max-width: none;
margin: 0;
}
}</pre>
<p>Pour qu'un élément soit isolé et colle au bord du <em>viewport</em>, on peut utiliser cette astuce de <a href="https://una.im/">Una Kravets</a> :</p>
<pre class="brush: css">.item {
width: 100vw;
margin-left: 50%;
transform: translate3d(-50%, 0, 0);
}</pre>
<p>On a ainsi une méthode plus compatible mais qui ne permet pas d'aligner les éléments aussi facilement que sur une grille CSS.</p>
<h2 id="Accessibilité">Accessibilité</h2>
<p>Bien que les grilles CSS nous permettent potentiellement de positionner n'importe où on le souhaite, il est important que l'ordre des éléments dans le document soit le même que l'ordre visuel, utilisé pour la navigation (voir <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">les grilles CSS et l'accessibilité</a> pour plus de détails).</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<h3 id="grid-template-columns"><code>grid-template-columns</code></h3>
<p>{{Compat("css.properties.grid-template-columns")}}</p>
<h2 id="See_also">Voir aussi</h2>
<ul>
<li>{{Cssxref("grid-template-columns")}}</li>
<li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS sur MDN</a></li>
<li>Article :<a href="https://css-irl.info/more-flexibility-with-minmax/"> Les grilles CSS, plus de flexibilité avec <code>minmax()</code> (en anglais)</a></li>
<li>Article : <a href="https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/">Isoler des éléments sur une grille CSS (en anglais)</a></li>
</ul>
|
