grid-column-gap

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 initiale0
Applicabilitéconteneurs de grille
Héritéenon
Pourcentagesfait référence à la dimension correspondante de la zone de contenu
Médiavisuel
Valeur calculéele pourcentage tel que spécifé ou une longeur absolue
Type d'animationune longueur
Ordre canoniquel'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>


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

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,