row-gap (grid-row-gap)
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis octobre 2017.
La propriété row-gap définit la taille des espaces (gouttières) entre les lignes d'un élément.
Exemple interactif
row-gap: 0;
row-gap: 1ch;
row-gap: 1em;
row-gap: 20px;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
display: grid;
grid-template-columns: 1fr 1fr;
width: 200px;
}
#example-element > div {
background-color: rgba(0, 0, 255, 0.2);
border: 3px solid blue;
}
Syntaxe
css
/* Valeurs de longueur */
/* Type <largeur> */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;
/* Valeurs proportionnelles */
/* Type <pourcentage> */
row-gap: 10%;
/* Valeurs globales */
row-gap: inherit;
row-gap: initial;
row-gap: revert;
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 (
<percentage>) sont relatives aux dimensions de l'élément.
Formal definition
| 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 |
| 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() ; |
Syntaxe formelle
row-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;
row-gap: 20px;
}
#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>
CSS
css
#grid {
display: grid;
height: 200px;
grid-template-columns: 200px;
grid-template-rows: repeat(3, 1fr);
row-gap: 20px;
}
#grid > div {
border: 1px solid green;
background-color: lime;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Box Alignment Module Level 3 # column-row-gap |
Compatibilité des navigateurs
Voir aussi
- Les autres propriétés relatives aux gouttières :
column-gap,gap - Guide sur les grilles : Les concepts de base des grilles CSS : les gouttières