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

normal | <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 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 initialenormal
Applicabilitémulti-column elements, flex containers, grid containers
Héritéenon
Pourcentagesfait référence à la dimension correspondante de la zone de contenu
Valeur calculéeas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Type d'animationune longueur, pourcentage ou calc() ;

Compatibilité des navigateurs

No compatibility data found for css.properties.grid-column-gap.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

Voir aussi