grid-auto-rows
Fixe la hauteur des lignes que la grille crée automatiquement.
- Valeur initiale
auto- Héritée
- Non
- Animable
- oui, en tant que longueur, pourcentage ou fr
- S’applique à
- conteneurs grid
- JavaScript
element.style.gridAutoRows = "minmax(100px, auto)"
Exemple
#.cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(70px, auto);
gap: 10px;
}<div class="cards stage">
<div class="box">Carte courte</div>
<div class="box">Carte avec une description plus longue qui a besoin de plus de place en hauteur</div>
<div class="box">Troisième</div><div class="box">Quatrième</div>
</div>Définition et utilisation
#La propriété grid-auto-rows définit la hauteur des lignes implicites. Dans une grille typique, vous ne définissez que les colonnes, et les lignes apparaissent toutes seules à mesure que les éléments s’ajoutent. Elles reçoivent toutes cette même hauteur.
L’écriture minmax(100px, auto) est particulièrement utile : la ligne fait au moins 100px, mais grandit si le contenu l’exige. Les cartes de la grille ont ainsi une hauteur minimale cohérente.
Donner plusieurs valeurs fait que les hauteurs se répètent cycliquement, ce qui permet de construire des mises en page de galerie rythmées.
Syntaxe
#grid-auto-rows: <taille de piste>+;Valeurs
#- Lignes ajustées au contenu.
- Chaque ligne fait 80px de hauteur.
- Au moins 60px, plus si le contenu l’exige.
- Les hauteurs de ligne alternent.
Valeurs en pratique
#auto
.demo { grid-auto-rows: auto; }80px
.demo { grid-auto-rows: 80px; }minmax(60px, auto)
.demo { grid-auto-rows: minmax(60px, auto); }40px 90px
.demo { grid-auto-rows: 40px 90px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#minmax(Xpx, auto)donne une hauteur minimale égale aux cartes, sans risque de tronquer un contenu plus long.- Les lignes de
grid-template-rowsont la priorité,grid-auto-rowsne concerne que les lignes supplémentaires.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.