oujood.com

Positionner des éléments dans une grille avec la propriété grid-row en CSS

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

chercher |

Comment utiliser la propriété grid-row pour gérer l'emplacement des éléments dans une grille en CSS

Le grid-row est une propriété de la grille CSS qui permet de spécifier la position d'un élément dans la grille en termes de lignes. Elle peut être utilisée avec les propriétés grid-template-rows et grid-template-columns pour définir la structure de la grille et la position des éléments à l'intérieur de celle-ci.

Syntaxe de la propriété css grid-row

La syntaxe de la propriété grid-row en CSS est la suivante :
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.
<track-size> peut être une taille absolue en pixels ou une taille relative en pourcentage de la taille de la grille.
<track-list> peut être une liste de tailles de piste séparées par des espaces.

Voici quelques exemples de la façon dont la propriété grid-row peut être utilisée :

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;

Il est également possible d'utiliser la propriété grid-row en combinaison avec la propriété grid-column pour positionner un élément à une intersection spécifique de la grille. Par exemple :

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éfautauto auto
Inherited: non
Animable : oui En savoir plus sur l'animable
Version: CSS1
Syntaxe JavaScript: object.style.gridRow="2 / span 2"

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.



ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion57165210 44

Voici un exemple de code qui utilise la propriété grid-row pour positionner un élément dans la grille :

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 */
}

Il est également possible d'utiliser la propriété grid-row pour spécifier la plage de lignes dans lesquelles l'élément doit être placé en utilisant la syntaxe grid-row: début / fin, où début est le numéro de la ligne de départ et fin est le numéro de la ligne de fin :

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.

Voici un exemple de code HTML et CSS qui utilise la propriété grid-row pour positionner des éléments dans une grille :

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>

Le code ci-dessus crée une grille avec deux lignes et deux colonnes, et positionne les éléments de la grille comme suit :

item-1 est placé sur la première ligne et couvre les deux premières colonnes de la grille.
item-2 est placé sur la deuxième ligne et la première colonne de la grille.
item-3 est placé sur la deuxième ligne et la deuxième colonne de la grille.
item-4 est placé sur les deux premières lignes et la première colonne de la grille.




Voir aussi nos tutoriel :

cryptocurrency bitcoin BTC Bitcoin BTC

Tout savoir sur Bitcoin.

html5 nouveaux éléments

html5 nouveaux éléments

fonction quotemeta

Protége les méta caractères