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 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.