grid-row
Détermine dans quelles lignes de la grille un élément commence et se termine.
- Valeur initiale
auto- Héritée
- Non
- Animable
- non
- S’applique à
- éléments grid et éléments en position absolue dans un conteneur grid
- JavaScript
element.style.gridRow = "span 2"
Exemple
#.dashboard {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 60px;
gap: 8px;
}
.dashboard .stats {
grid-row: span 2;
}<div class="dashboard stage">
<div class="box stats">Statistiques</div>
<div class="box">EXP</div><div class="box">Série</div><div class="box">Carburant</div><div class="box">Cartes</div>
</div>Définition et utilisation
#La propriété grid-row est un raccourci pour grid-row-start et grid-row-end. Elle fonctionne comme grid-column, mais à la verticale : 1 / 3 représente les deux premières lignes, et span 2 une étendue de deux lignes.
Étirer des éléments sur plusieurs lignes est utile dans les galeries et les tableaux de bord, quand une tuile doit être plus haute que les autres.
Si un élément dépasse les lignes définies, la grille ajoute des lignes implicites dont la hauteur vient de grid-auto-rows.
Syntaxe
#grid-row: <début> [ / <fin> ]?;Valeurs
#Valeurs en pratique
#auto
.target { grid-row: auto; }span 2
.target { grid-row: span 2; }2 / 3
.target { grid-row: 2 / 3; }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
#- Combinez
grid-rowavecgrid-columnpour placer précisément un élément sur les deux axes. - Pour placer des éléments par nom,
grid-template-areasetgrid-areasont plus pratiques.
Entrées associées
#- grid-columnDétermine dans quelles colonnes de la grille un élément commence et se termine.
- grid-areaAssigne un élément à une zone nommée de la grille, ou règle en une fois ses lignes et ses colonnes.
- grid-auto-rowsFixe la hauteur des lignes que la grille crée automatiquement.
- grid-template-rowsDéfinit les lignes de la grille : leur nombre et leur hauteur.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.