Retourne le code PHP utilisé pour générer une variable
La propriété grid-row spécifie la taille et l'emplacement d'un élément de grille dans une disposition de grille, et est une propriété raccourcie pour les propriétés suivantes: grid-row-start et grid-row-end.
Découvrez la puissance de la propriété grid-row pour la mise en page de grille en CSS
grid-row: <line> / <line> | <line> | span <line> | <track-size> | <track-list> | auto<line> peut être un nombre entier indiquant le numéro de la ligne de la grille ou un nom de ligne défini dans la propriété grid-template-areas.
Exemple Copier le code
/* positionne l'élément dans la deuxième ligne de la grille */ grid-row: 2; /* positionne l'élément sur les deux premières lignes de la grille */ grid-row: 1 / 3; /* étend l'élément sur trois lignes de la grille */ grid-row: span 3; /* positionne l'élément sur la troisième ligne de la grille et lui donne une hauteur de 100 pixels */ grid-row: 3 / 100px; /* positionne l'élément sur la deuxième ligne de la grille et lui donne une hauteur de 5 0% de la taille de la grille */ grid-row: 2 / 50%; /* positionne l'élément sur les deux premières lignes de la grille et lui donne une hauteur de 100 pixels et 50 pixels respectivement */ grid-row: 100px 50px / auto;
Exemple Copier le code
/* positionne l'élément sur la deuxième ligne et la troisième colonne de la grille */ grid-row: 2; grid-column: 3;
Valeurs par défaut | auto auto |
---|---|
Inherited: | non |
Animable : | oui En savoir plus sur l'animable |
Version: | CSS1 |
Syntaxe JavaScript: | object.style.gridRow="2 / span 2" |
Explorateur | |||||
---|---|---|---|---|---|
Verssion | 57 | 16 | 52 | 10 | 44 |
Exemple Copier le code
.grid { display: grid; grid-template-rows: 50px 50px; grid-template-columns: 50px 50px; } .item { grid-row: 2; /* positionne l'élément dans la deuxième ligne de la grille */ }
Exemple Copier le code
.item { grid-row: 1 / 3; /* positionne l'élément sur les deux premières lignes de la grille */ }Il est également possible de spécifier la position de l'élément en utilisant des noms de lignes ou de colonnes définis dans la propriété grid-template-areas. Par exemple :
Exemple Copier le code
.grid { display: grid; grid-template-rows: [row1-start] 50px [row1-end row2-start] 50px [row2-end]; grid-template-columns: 50px 50px; grid-template-areas: "header header" "content sidebar" "footer footer"; } .header { grid-row: row1-start / row1-end; } .content { grid-row: row2-start; } .sidebar { grid-row: row2-start; } .footer { grid-row: row2-end; }La propriété grid-row est une propriété très utile pour la mise en page de grille en CSS, car elle permet de positionner les éléments de manière précise dans la grille. Elle est particulièrement utile lorsque vous avez besoin de créer des mises en page complexes ou de gérer l'emplacement des éléments de manière dynamique en réponse à des changements de taille ou de contenu.
Exemple Copier le code
<!DOCTYPE html> <html> <head> <style> .grid { display: grid; grid-template-rows: 100px 50px; grid-template-columns: 50% 50%; } .grid div{border:solid 1px #000;} .item-1 { grid-row: 1; grid-column: 1 / 3; } .item-2 { grid-row: 2; grid-column: 1; } .item-3 { grid-row: 2; grid-column: 2; } .item-4 { grid-row: span 2; grid-column: 1; } </style> </head> <body> <h1>La propriété css grid-row</h1> <div class="grid"> <div class="item item-1">Item 1</div> <div class="item item-2">Item 2</div> <div class="item item-3">Item 3</div> <div class="item item-4">Item 4</div> </div> </body> </html>