Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
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.
| Valeur initiale | 0 |
|---|---|
| Applicabilité | conteneurs de grille |
| Héritée | non |
| Pourcentages | oui, as the dimension of the element |
| Média | visuel |
| Valeur calculée | le pourcentage tel que spécifé ou une longeur absolue |
| Animable | oui, comme une longueur |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
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
<percentage> | <length>
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. |
Version de travail | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 29.0[1] | 40.0 (40.0)[2] | Pas de support[3] | Pas de support[3] | 28.0[1] | Nightly build-webkit |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support simple | Pas de support | Pas de support | Pas de support[3] | Pas de support | Pas de support |
[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é.