Propriété CSS grid-row
Exemple
Faites en sorte que "item1" commence sur la ligne 1 et s'étende sur 2 lignes :
.item1 {
grid-row: 1 / span 2;
}
Définition et utilisation
La grid-row
propriété spécifie la taille et l'emplacement d'un élément de grille dans une disposition de grille, et est une propriété abrégée pour les propriétés suivantes :
Valeur par défaut: | voiture voiture |
---|---|
Hérité: | non |
Animable : | Oui. En savoir plus sur l'animation |
Version: | Module de disposition de grille CSS niveau 1 |
Syntaxe JavaScript : | objet .style.gridRow="2 / durée 2" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
grid-row | 57 | 16 | 52 | 10 | 44 |
Syntaxe CSS
grid-row: grid-row-start /
grid-row-end;
Valeurs de propriété
Value | Description |
---|---|
grid-row-start | Specifies on which row to start displaying the item. |
grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
Plus d'exemples
Exemple
Vous pouvez utiliser des valeurs ligne-ligne à la place du nombre de lignes à couvrir :
.item1 {
grid-row: 1 / 3;
}
Pages connexes
Tutoriel CSS : Mise en page de la grille CSS