{{CSSRef}}{{SeeCompatTable}}
La propriété grid-column-gap
définit l'espacement entre les colonnes d'une grille.
En termes de dimensionnement, cet espace est traité comme une piste supplémentaire de la longueur indiquée. Les valeurs négatives ne sont pas autorisées.
{{cssinfo}}
Syntaxe
/* Valeurs de longueur */ grid-column-gap: 20px; grid-column-gap: 1em; grid-column-gap: 3vmin; grid-column-gap: 0.5cm; /* Valeurs relatives à la taille */ /* de l'élément englobant */ /* Type <percentage> */ grid-column-gap: 10%; /* Valeurs globales */ grid-column-gap: inherit; grid-column-gap: initial; grid-column-gap: unset;
Valeurs
<length>
- La largeur de la « gouttière » placée entre les colonnes de la grille.
<percentage>
- La largeur de la « gouttière » placée entre les colonnes de la grille, exprimée relativement aux dimensions de l'élément englobant.
Syntaxe formelle
{{csssyntax}}
Exemples
CSS
#grid { display: grid; height: 100px; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; grid-column-gap: 20px; } #grid > div { background-color: lime; }
HTML
<div id="grid"> <div></div> <div></div> <div></div> </div>
Résultat
{{EmbedLiveSample("Exemples", "100%", "100px")}}
Spécifications
Spécification | État | Commentaires |
---|---|---|
{{SpecName("CSS3 Grid", "#propdef-grid-column-gap", "grid-column-gap")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
Compatibilité des navigateurs
{{CompatibilityTable}}
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
---|---|---|---|---|---|---|
Support simple | 29.0[1] | {{CompatGeckoDesktop("40.0")}}[2] | {{CompatNo}}[3] | {{CompatNo}}[3] | 28.0[1] | {{CompatNightly("Safari")}}{{property_prefix("-webkit")}} |
Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple | {{CompatNo}} | {{CompatNo}} | {{CompatNo}}[3] | {{CompatNo}} | {{CompatNo}} |
[1] Cette fonctionnalité est implémentée via le marqueur fonctionnalités expérimentales de la Web Platform sous chrome://flags
.
[2] Cette fonctionnalité est implémentée via la préférence layout.css.grid.enabled
qui vaut false
par défaut.
[3] Internet Explorer implémente une ancienne version de la spécification qui ne définit pas cette propriété.
Voir aussi
- {{cssxref("grid-row-gap")}}
- {{cssxref("grid-gap")}}