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
No compatibility data found. Please contribute data for "css.properties.grid-column-gap" (depth: 1) to the MDN compatibility data repository.
Voir aussi
- Versions standards non-préfixées :
grid-row-gapgrid-gap- Guide : les concepts de bases : les gouttières