Propriété CSS grid-row-gap
Apprenez comment CSS grid-row-gap définit l'espace entre les lignes d'une grille, avec la syntaxe, les valeurs et des exemples pratiques.
La propriété CSS grid-row-gap définit la taille de l'espace (la gouttière) entre les lignes d'un conteneur de grille. Elle insère un espace entre les lignes — jamais avant la première ligne ni après la dernière — ce qui évite la création de marges extérieures inattendues.
Cette propriété n'affecte que les éléments dont la valeur de display est grid ou inline-grid. Elle n'a aucun effet sur les mises en page Flexbox ou multi-colonnes ; dans ces cas, utilisez plutôt la propriété standard column-gap ou le raccourci universel gap.
grid-row-gap est désormais un alias pour la propriété standard row-gap, qui fonctionne avec les mises en page grid, flexbox et multi-colonnes. Les navigateurs les traitent de façon identique dans un contexte de grille. Préférez row-gap (ou le raccourci grid-gap qui définit les deux axes simultanément) dans le nouveau code. grid-row-gap reste valide et est conservé pour la rétrocompatibilité.
Référence rapide
| Valeur initiale | normal (traitée comme 0 dans une grille) |
| S'applique à | Conteneurs de grille |
| Héritée | Non |
| Animable | Oui |
| Spécification | CSS Grid Layout Module Level 1 |
| Syntaxe DOM | element.style.gridRowGap = "30px" |
Quand l'utiliser
Utilisez grid-row-gap lorsque vous souhaitez un espacement vertical prévisible entre les lignes de la grille sans recourir aux marges sur les éléments individuels. Les marges entre les éléments de grille sont complexes à gérer — elles s'effondrent de manière inégale, ajoutent de l'espace sur les bords et sont difficiles à modifier globalement. Une gouttière de ligne, en revanche, se place uniquement entre les lignes et maintient les bords extérieurs de la grille au ras, ce qui facilite le raisonnement sur l'espacement.
Combinez-la avec grid-column-gap pour l'espacement horizontal, ou remplacez les deux par le raccourci grid-gap lorsque vous souhaitez définir les gouttières de ligne et de colonne en même temps.
Syntaxe
/* keyword */
grid-row-gap: normal;
/* absolute length */
grid-row-gap: 20px;
grid-row-gap: 1.5em;
/* percentage of the container's block size */
grid-row-gap: 10%;
/* global values */
grid-row-gap: inherit;
grid-row-gap: initial;
grid-row-gap: unset;Valeurs
| Valeur | Description |
|---|---|
normal | L'espacement par défaut du navigateur. Se résout à 0 dans un conteneur de grille. |
<length> | Une valeur de longueur CSS non négative (px, em, rem, vw, etc.). |
<percentage> | Un pourcentage non négatif résolu par rapport à l'axe de bloc (hauteur) du conteneur de grille. |
inherit | Prend la valeur calculée de l'élément parent. |
initial | Réinitialise la propriété à sa valeur initiale (normal). |
unset | Se comporte comme inherit si la propriété est héritée, sinon comme initial. |
Exemples
Aucune gouttière de ligne (par défaut)
Avec grid-row-gap: 0, les lignes se touchent directement sans gouttière verticale. Seul grid-column-gap sépare les éléments horizontalement.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 20px;
grid-row-gap: 0;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-row-gap property example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div class="box8">8</div>
</div>
</body>
</html>![Exemple CSS grid-row-gap sans gouttière de ligne](/uploads/media/default/0001/04/4123ae945c3b6e7b25f0fc5911ae459f604c3c1c.png "Exemple CSS grid-row-gap sans gouttière de ligne" =420x)
Gouttière fixe en pixels
Définir grid-row-gap: 40px ajoute une gouttière de 40 pixels entre chaque paire de lignes. La gouttière de colonne reste indépendante et est contrôlée séparément par grid-column-gap.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 20px;
grid-row-gap: 40px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-row-gap property example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>Gouttière en pourcentage
Une valeur en pourcentage est résolue par rapport à la taille de bloc (hauteur) du conteneur de grille. Cela signifie que la gouttière augmente proportionnellement lorsque le conteneur est plus grand, ce qui peut être utile pour des mises en page fluides sensibles au rapport d'aspect. Pour la plupart des mises en page de contenu, une valeur fixe en px ou rem est plus prévisible.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-row-gap: 15%;
grid-column-gap: 3%;
background-color: grey;
padding: 40px;
}
.grid-container > div {
background-color: white;
text-align: center;
padding: 25px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>Migration vers le moderne row-gap
La spécification CSS Grid a ensuite été alignée sur les conventions de gouttière multi-colonnes et flexbox, renommant grid-row-gap en row-gap. Les deux sont interchangeables dans un contexte de grille, mais row-gap fonctionne également dans les conteneurs flexbox et multi-colonnes. La migration est un simple changement de nom en une ligne :
/* Legacy — still valid, but prefer row-gap in new code */
grid-row-gap: 20px;
/* Modern equivalent */
row-gap: 20px;
/* Shorthand: sets row-gap and column-gap at once */
gap: 20px 10px; /* row-gap: 20px; column-gap: 10px */
gap: 20px; /* both row-gap and column-gap: 20px */Tous les navigateurs majeurs prennent en charge row-gap pour les grilles depuis début 2020, donc il n'existe aucune raison pratique de compatibilité pour continuer à utiliser le nom grid-row-gap dans les nouveaux projets.
Pièges courants
- Gouttières en pourcentage et hauteur intrinsèque. Lorsque le conteneur de grille n'a pas de
heightexplicite, le navigateur ne peut pas résoudre une gouttière de ligne en pourcentage tant qu'il ne connaît pas la hauteur du conteneur — qui dépend elle-même du contenu. Cette dépendance circulaire peut faire que la gouttière se résout à0. Utilisezpxouremsauf si le conteneur a une hauteur fixe. - Les valeurs négatives ne sont pas autorisées. Contrairement aux marges,
grid-row-gapn'accepte que des valeurs nulles ou positives. Tenter de définir une gouttière négative est invalide et la déclaration est ignorée. - La gouttière n'ajoute pas d'espace extérieur.
grid-row-gapajoute de l'espace uniquement entre les lignes. Si vous avez besoin d'un espacement autour de toute la grille, utilisez la propriétépaddingdu conteneur. - Les éléments qui s'étendent sur plusieurs lignes ne sont pas affectés. Un élément qui s'étend sur plusieurs lignes avec
grid-row: span 2bénéficie tout de même de la gouttière entre ces lignes dans le cadre de son espace alloué.
Propriétés connexes
grid-column-gap— définit l'espace entre les colonnes de la grille.grid-gap— raccourci qui définit à la foisgrid-row-gapetgrid-column-gap.column-gap— la propriété moderne et indépendante de la mise en page pour l'espacement des colonnes.grid-template-columns— définit les pistes de colonnes entre lesquelles la gouttière se place.grid-template-rows— définit les pistes de lignes séparées par cette gouttière.grid-auto-rows— contrôle la taille des lignes créées implicitement.