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 <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: unset;
Valeurs
<pourcentage-largeur>-
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
Disposition flexible
Experimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
CSS
#flexbox {
display: flex;
flex-wrap: wrap;
width: 300px;
row-gap: 20px;
}
#flexbox > div {
background-color: lime;
flex: 1 1 auto;
width: 100px;
height: 50px;
}
HTML
<div id="flexbox">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Résultat
Disposition sur une grille
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 |
| 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() ; |
Compatibilité des navigateurs
Prise en charge pour les dispositions flexibles
BCD tables only load in the browser
Prise en charge pour les grilles
BCD tables only load in the browser
Voir aussi
- Les versions sans préfixe des propriétés :
- Guide : les concepts de base : les gouttières
- Guide : les concepts de base des boîtes flexibles (flexbox)