oujood.com

Apprenez à utiliser grid-row-end pour créer des mises en page réactives avec CSS Grid

la propriété grid-row-end permet de définir la ligne de grille sur laquelle se termine un élément dans un système de grille CSS.
Elle peut être utilisée en combinaison avec grid-row-start, grid-column-start et grid-column-end pour définir précisément l'emplacement d'un élément sur une grille.

chercher |

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 CSS

Voici 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éfautauto
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é.
ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion57165210 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.




Voir aussi nos tutoriel :

Balise i italique

Définit une partie du texte d'une voix alternative ou de l'humeur

Balise option

Définit une option dans une liste déroulante

Utiliser les class et id en css

Affecter des styles différents à de mêmes balises. Le concept des attributs: class et id....