gap (grid-gap)

La propriété gap est une propriété raccourcie pour row-gap et column-gap qui permet de définir les espaces entre les lignes et entre les colonnes d'une grille.

Note : La propriété grid-gap a initialement été définie dans le module de spécification CSS Grid Layout. Cette version préfixée a été remplacée par gap. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.

Syntaxe

/* Une valeur de longueur */
/* Type <length>          */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/* Une valeur proportionnelle */
/* Type <percentage>          */
gap: 16%;
gap: 100%;

/* Deux valeurs de longueur */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* Une ou deux valeurs proportionnelles */
/* Type <percentage>             */
gap: 16% 100%;
gap: 21px 82%;

/* Valeurs calc() */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/* Valeurs globales */
gap: inherit;
gap: initial;
gap: unset;

Cette propriété est définie avec une valeur <'row-gap'>, éventuellement suivi d'une valeur <'column-gap'>. Si <'column-gap'> n'est pas utilisée, la valeur utilisée sera la même que <'row-gap'>.

<'row-gap'> et <'column-gap'> sont des valeurs de type <length> ou <percentage>.

Valeurs

<length>
La largeur de l'espace entre les lignes et/ou entre les colonnes (cf. <length> pour les valeurs utilisables).
<percentage>
La largeur de l'espace entre les lignes et/ou entre les colonnes en fonction de la taille de l'élément englobant (cf. <percentage> pour les valeurs utilisables).

Syntaxe formelle

<'row-gap'> <'column-gap'>?

Exemples

Disposition flexible

Experimental

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

HTML

<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 20px 5px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;

}

Résultat

Grilles CSS

HTML

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

Résultat

Multi-colonnes

HTML

<p class="content-box">
  voici un texte en multi-colonne sur des colonnes avec
  une gouttière de 40 pixels créée grâce à la propriété
  CSS <code>gap</code>. Est-ce que c'est pas trop génial ?
</p>

CSS

.content-box {
  column-count: 3;
  gap: 40px;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Box Alignment Module Level 3
La définition de 'gap' dans cette spécification.
Version de travail Définition initiale.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitémulti-column elements, flex containers, grid containers
Héritéenon
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
  • row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
  • column-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :

Compatibilité des navigateurs

Prise en charge pour les dispositions flexibles

BCD tables only load in the browser

Prise en charge pour les grilles CSS

BCD tables only load in the browser

Prise en charge pour les dispositions multi-colonnes

BCD tables only load in the browser

Voir aussi