row-gap (grid-row-gap)

La propriété row-gap définit la taille des gouttières entre les lignes d'un élément.

Note : La propriété grid-row-gap a d'abord été définie avec le module de spécification CSS Grid Layout. Cette propriété préfixée a ensuite été remplacée par row-gap dans le module CSS Alignment afin d'être généralisée à d'autres modes de disposition. 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

/* Valeurs de longueur */
/* Type <length>       */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/* Valeurs proportionnelles */
/* Type <percentage> */
row-gap: 10%;

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

Valeurs

<length-percentage>: La largeur de la « gouttière » placée entre les lignes de la grille. Les valeurs exprimées en pourcentages sont relatives aux dimensions de l'élément.

Syntaxe formelle

normal | <length-percentage>où 
<length-percentage> = <length> | <percentage>

Exemples

CSS

#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(3, 1fr);
  row-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 'row-gap' dans cette spécification.	Version de travail	Définition initiale.

Valeur initiale	`normal`
Applicabilité	multi-column elements, flex containers, grid containers
Héritée	non
Pourcentages	fait référence à la dimension correspondante de la zone de contenu
Média	visuel
Valeur calculée	as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Type d'animation	une longueur, pourcentage ou calc() ;
Ordre canonique	selon la grammaire

Fonctionnalité	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Supported in Flex Layout	?	?	63	Non	?	Non
Supported in Grid Layout	66 57¹ 29¹ ²	16 16¹	61 52¹ 40¹ ³	Non	53 44¹ 28¹ ⁴	10.1¹

Fonctionnalité

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Supported in Flex Layout

Non

Supported in Grid Layout

57¹

29¹ ²

16¹

52¹

40¹ ³

Non

44¹

28¹ ⁴

10.1¹

Fonctionnalité	Android webview	Chrome for Android	Edge mobile	Firefox for Android	Opera Android	iOS Safari	Samsung Internet
Supported in Flex Layout	?	?	Non	63	?	Non	?
Supported in Grid Layout	66 57¹	66 57¹ 29²	Non	61 52¹ 40¹ ³	53 44¹	10.3¹	6.0¹

Fonctionnalité

Android webview

Chrome for Android

Edge mobile

Firefox for Android

Opera Android

iOS Safari

Samsung Internet

Supported in Flex Layout

Non

Supported in Grid Layout

57¹

29²

Non

52¹

40¹ ³

44¹

10.3¹

6.0¹

1. Supported as grid-row-gap.

2. From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

3. 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.

4. From version 28: this feature is behind the Enable experimental Web Platform features preference.

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Edge Mobile	Firefox pour Android	Opera pour Android	Safari pour iOS	Samsung Internet
Supported in Flex Layout	Chrome ?	Edge ?	Firefox Support complet 63	IE Aucun support Non	Opera ?	Safari Aucun support Non	WebView Android ?	Chrome Android ?	Edge Mobile Aucun support Non	Firefox Android Support complet 63	Opera Android ?	Safari iOS Aucun support Non	Samsung Internet Android ?
Supported in Grid Layout	Chrome Support complet 66 Support complet 66 Support complet 57 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `grid-row-gap` Support complet 29 Autre nom Désactivée Autre nom Cette fonctionnalité utilise le nom non-standard : `grid-row-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-row-gap`	Firefox Support complet 61 Support complet 61 Support complet 52 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `grid-row-gap` Support complet 40 Autre nom Désactivée Autre nom Cette fonctionnalité utilise le nom non-standard : `grid-row-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 Non	Opera Support complet 53 Support complet 53 Support complet 44 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `grid-row-gap` Support complet 28 Autre nom Désactivée Autre nom Cette fonctionnalité utilise le nom non-standard : `grid-row-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-row-gap`	WebView Android Support complet 66 Support complet 66 Support complet 57 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `grid-row-gap`	Chrome Android Support complet 66 Support complet 66 Support complet 57 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `grid-row-gap` Support complet 29 Désactivée 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 Non	Firefox Android Support complet 61 Support complet 61 Support complet 52 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `grid-row-gap` Support complet 40 Autre nom Désactivée Autre nom Cette fonctionnalité utilise le nom non-standard : `grid-row-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-row-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-row-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-row-gap`

Légende

Support complet: Support complet
Aucun support: Aucun support
Compatibilité inconnue: Compatibilité inconnue
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.

Voir aussi

Les versions sans préfixe des propriétés :
- column-gap
- gap
Guide : les concepts de base : les gouttières
Guide : les concepts de base des boîtes flexibles (flexbox)