grid-column-gap

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.

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

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