Propriété row-gap de CSS

Définition et utilisation

La propriété row-gap définit l'intervalle entre les lignes dans le layout élastique ou en grille.

La propriété row-gap était auparavant appelée grid-row-gap.

Voir également :

Tutoriel CSS :Layout en grille CSS

Tutoriel CSS :Layout élastique CSS

Manuel de référence CSS :Propriété gap

Manuel de référence CSS :Propriété column-gap

Exemple

Exemple 1

Définir un espace de 50 pixels entre les lignes de la grille :

#grid-container {
  display: grid;
  row-gap: 50px;
}

Essayez-le vous-même

Exemple 2 : Layout élastique

Définir l'intervalle entre les lignes dans le layout élastique à 70px :

#flex-container {
  display: flex;
  row-gap: 70px;
}

Essayez-le vous-même

Syntaxe CSS

row-gap: length|normal|initial|inherit;
Valeur Description
length Définit la longueur spécifiée ou la valeur en pourcentage de l'intervalle entre les lignes.
normal Valeur par défaut. Définit l'intervalle normal entre les lignes.
initial Réinitialise cette propriété à sa valeur par défaut. Voir initial.
inherit Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut : normal
Héritage : non
Réalisation des animations : Pris en charge. Voir les propriétés individuelles. Voir :Propriétés liées aux animations.
Version : Module d'alignement des boîtes CSS niveau 3
Syntaxe JavaScript : object.style.rowGap="50px"

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge cette propriété.

mise en page Chrome IE / Edge Firefox Safari Opera
dans la grille 66 16 61 12 53
dans le cadre élastique 84 84 63 14.1 70