La propriété grid-column-gap définit l'espacement entre les colonnes d'une grille.
/* 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;
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.
| Valeur initiale | 0 |
|---|---|
| Applicabilité | conteneurs de grille |
| Héritée | non |
| Pourcentages | fait référence à la dimension correspondante de la zone de contenu |
| Média | visuel |
| Valeur calculée | le pourcentage tel que spécifé ou une longeur absolue |
| Type d'animation | une longueur |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
Valeurs
<length-percentage>- La largeur de la « gouttière » placée entre les colonnes de la grille. Pour les valeurs exprimées en pourcentages, elles sont relatives aux dimensions de l'élément englobant.
Syntaxe formelle
<length-percentage>où
<length-percentage> = <length> | <percentage>
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
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Grid Layout La définition de 'grid-column-gap' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 57.0[1] | 52.0 (52.0)[2] | Pas de support[3] | Pas de support[3] | 44[4] | Pas de support[5] |
| Fonctionnalité | Chrome pour Android | Webview Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | 57.0[1] | 57.0[1] | 52.0 (52.0)[2] | Pas de support[3] | 44 | Pas de support |
[1] Cette fonctionnalité pouvait être activée à partir de Chrome 29.0 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 depuis Gecko 40 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37) où elle était désactivée par défaut. Depuis Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49), elle est activée par défaut.
[3] Internet Explorer implémente une ancienne version de la spécification qui ne définit pas cette propriété.
[4] Cette fonctionnalité est disponible via la préférence Activer les fonctionnalités expérimentales de la plateforme web sous chrome://flags depuis Opera 28.0.
[5] Implémentation expérimentale disponible via Safari Technological Preview.