Obsolète
Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
Note : La propriété grid-column-gap a été fusionnée avec la propriété column-gap afin d'être remplacée par cette dernière.
La propriété grid-column-gap définit l'espacement entre les colonnes d'une grille.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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.
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-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 Box Alignment Module Level 3 La définition de 'grid-column-gap' dans cette spécification. |
Version de travail | Dépréciée afin d'être remplacée par column-gap. |
| CSS Grid Layout La définition de 'grid-column-gap' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
| 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 |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 57 292 | 16 | 52 403 | Non | 44 284 | 10.1 |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | 57 291 | 57 292 | 16 | 52 403 | 44 | 10.3 | 6.0 |
1. From version 29: this feature is behind the Enable experimental Web Platform features preference.
2. From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
3. From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
4. From version 28: this feature is behind the Enable experimental Web Platform features preference.
Voir aussi
- Versions standards non-préfixées :
grid-row-gapgrid-gap- Guide : les concepts de bases : les gouttières