row-gap
Baseline
Large disponibilité
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é CSS row-gap définit la taille des espaces (gouttières) entre les lignes d'un élément.
Les premières versions de la spécification appelaient cette propriété grid-row-gap, et pour maintenir la compatibilité avec les sites Web existants, les navigateurs accepteront toujours grid-row-gap comme alias de row-gap.
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>Un</div>
<div>Deux</div>
<div>Trois</div>
<div>Quatre</div>
<div>Cinq</div>
</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
display: grid;
grid-template-columns: 1fr 1fr;
width: 200px;
}
#example-element > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
}
Syntaxe
css
/* Valeurs de type <largeur> */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;
/* Valeurs de type <pourcentage> */
row-gap: 10%;
/* Valeurs globales */
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;
Valeurs
<length-percentage>-
La largeur de la gouttière séparant les lignes. Les valeurs en pourcentage (
<percentage>) sont relatives à la dimension de l'élément.
Définition formelle
| Valeur initiale | normal |
|---|---|
| Applicabilité | éléments multi-colonnes, conteneurs flexibles, conteneurs de grille |
| Héritée | non |
| Pourcentages | fait référence à la dimension correspondante de la zone de contenu |
| Valeur calculée | tel que défini, avec des longueurs (<length>) rendues absolues, et normal calculé à zéro sauf sur les éléments multi-colonnes |
| Type d'animation | une longueur, pourcentage ou calc() ; |
Syntaxe formelle
row-gap =
normal |
<length-percentage [0,∞]> |
<line-width>
<length-percentage> =
<length> |
<percentage>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
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></div>
<div></div>
<div></div>
</div>
CSS
css
#grid {
display: grid;
height: 200px;
grid-template-columns: 150px 1fr;
grid-template-rows: repeat(3, 1fr);
row-gap: 20px;
}
#grid > div {
border: 1px solid green;
background-color: lime;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Box Alignment Module Level 3 # column-row-gap |
Compatibilité des navigateurs
Voir aussi
- La propriété
column-gap - La propriété
gap - Les concepts de base des grilles CSS : les gouttières