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 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 :
- row-gap,
- column-gap,
- gap
grid-row-gap
grid-gap
Guide : les concepts de bases : les gouttières