gap (grid-gap)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

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

Exemple interactif

Syntaxe

css
/* 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: revert;
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 défini, 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 pistes de grille.

<percentage>

La largeur de l'espace entre les pistes de grille en fonction de la taille de l'élément englobant.

Définition formelle

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 :

Syntaxe formelle

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

<row-gap> =
normal |
<length-percentage [0,∞]>

<column-gap> =
normal |
<length-percentage [0,∞]>

<length-percentage> =
<length> |
<percentage>

Exemples

Disposition flexible

HTML

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

CSS

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

Disposition en grille

HTML

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

CSS

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

Disposition multi-colonnes

HTML

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

CSS

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

Résultat

Spécifications

Specification
CSS Box Alignment Module Level 3
# gap-shorthand

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
gap
Supported in Flex Layout
Supported in Grid Layout
calc() values
<percentage> values
Supported in Multi-column Layout

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

Voir aussi