Définit le corps du document
Définition et utilisation da la propriété css grid-row-end
La propriété CSS grid-row-end définit la ligne de grille sur laquelle se termine l'élément. Elle fonctionne de manière similaire à la propriété grid-row-start, qui définit la ligne de grille sur laquelle commence l'élément. La Syntaxe CSSVoici la syntaxe de la propriété CSS grid-row-end :
grid-row-end: <ligne> | <auto> | span <nombre>
La valeur de grid-row-end peut être spécifiée de plusieurs manières :
<ligne> : cette valeur peut être un nombre entier indiquant l'indice de la ligne de grille sur laquelle se termine l'élément. Par exemple, grid-row-end: 3 placera l'élément sur les lignes 1 et 2 de la grille (si grid-row-start est défini sur 1).
<auto> : cette valeur indique que l'élément doit s'étendre sur toutes les lignes restantes de la grille.
span <nombre> : cette valeur indique que l'élément doit s'étendre sur plusieurs lignes, en utilisant le nombre spécifié comme nombre de lignes. Par exemple, grid-row-end: span 2 placera l'élément sur les lignes 1 et 2 de la grille (si grid-row-start est défini sur 1).
Voici un exemple de code qui utilise grid-row-end pour définir l'emplacement d'un élément sur une grille à deux colonnes :
Exemple Copier le code
.item {
grid-row-start: 1;
grid-row-end: 3;
}
Dans cet exemple, l'élément .item occupera les lignes 1 et 2 de la grille.
Il est important de noter que grid-row-end doit être utilisé en combinaison avec la propriété grid-row-start pour définir l'emplacement d'un élément sur une grille. Si seule grid-row-end est définie, l'élément ne sera pas visible sur la grille.
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS1 |
| Syntaxe JavaScript: | object.style.gridRowEnd="4" |
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é.| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 57 | 16 | 52 | 10 | 44 |
Il est également possible de spécifier les lignes de grille en utilisant des valeurs auto ou des indices de lignes. Par exemple, voici comment utiliser auto pour faire en sorte que l'élément s'étende sur toutes les lignes restantes :
Exemple Copier le code
.item {
grid-row-start: 1;
grid-row-end: auto;
}
Il est également possible de combiner css-grid-row-start et grid-row-end avec les propriétés grid-column-start et grid-column-end pour définir l'emplacement d'un élément sur une grille à plusieurs colonnes.
Voici un exemple de code HTML et CSS qui utilise la propriété grid-row-end pour définir l'emplacement d'un élément sur une grille à deux colonnes :
Exemple Copier le code
<meta charset="UTF-8">
<title> La propriété css grid-row-end </title>
<style>
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid div{
border:solid 1px #000;
text-align:center;
}
.item {
grid-row-start: 1;
grid-row-end: 3;
}
</style>
</head>
<body>
<h1>La propriété css grid-row-end</h1>
<div class="grid">
<div class="item">Élément 1</div>
<div class="item">Élément 2</div>
</div>
</body>
</html>
Dans cet exemple, la classe .grid est utilisée pour créer une grille à deux colonnes, avec une colonne de largeur égale à 1 fraction de la largeur totale. La classe .item est utilisée pour définir l'emplacement des éléments dans la grille. En utilisant grid-row-start: 1 et grid-row-end: 3, nous faisons en sorte que chaque élément occupe les lignes 1 et 2 de la grille.
Il est important de noter que la propriété grid-row-end doit être utilisée en combinaison avec grid-row-start pour définir l'emplacement d'un élément sur une grille. Si seule grid-row-end est définie, l'élément ne sera pas visible sur la grille.