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

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éconteneurs de grille
Héritéenon
Médiavisuel
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 :
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Prise en charge pour les dispositions flexibles

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome ? Edge ? Firefox Support complet 63IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet 63Opera Android ? Safari iOS Aucun support NonSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Prise en charge pour les grilles CSS

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 66
Support complet 66
Support complet 57
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
Support complet 29
Autre nom Désactivée
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 16
Support complet 16
Support complet 16
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
Firefox Support complet 61
Support complet 61
Support complet 52
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
Support complet 40
Autre nom Désactivée
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
Désactivée From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 53
Support complet 53
Support complet 44
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
Support complet 28
Autre nom Désactivée
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
Désactivée From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 10.1
Autre nom
Support complet 10.1
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
WebView Android Support complet 66
Support complet 66
Support complet 57
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
Chrome Android Support complet 66
Support complet 66
Support complet 57
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
Support complet 29
Autre nom Désactivée
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile Aucun support NonFirefox Android Support complet 61
Support complet 61
Support complet 52
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
Support complet 40
Autre nom Désactivée
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
Désactivée From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 53
Support complet 53
Support complet 44
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
Safari iOS Support complet 10.3
Autre nom
Support complet 10.3
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
Samsung Internet Android Support complet 6.0
Autre nom
Support complet 6.0
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : grid-gap
<percentage> values
Expérimentale
Chrome Support complet 66Edge Support complet 16Firefox Support complet 52IE Aucun support NonOpera Support complet 53Safari Aucun support NonWebView Android Support complet 66Chrome Android Support complet 66Edge Mobile Aucun support NonFirefox Android Support complet 52Opera Android Support complet 53Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
calc() values
Expérimentale
Chrome Support complet 66Edge ? Firefox Support complet 52IE Aucun support NonOpera Support complet 53Safari Aucun support NonWebView Android Support complet 66Chrome Android Support complet 66Edge Mobile Aucun support NonFirefox Android Support complet 52Opera Android Support complet 53Safari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.

Prise en charge pour les dispositions multi-colonnes

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 66Edge Support complet 16Firefox Support complet 61IE Aucun support NonOpera Support complet 53Safari Aucun support NonWebView Android Support complet 66Chrome Android Support complet 66Edge Mobile ? Firefox Android Support complet 61Opera Android Support complet 53Safari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,