Propriété grid-row-start

La propriété grid-row-start définit la position de départ d'un élément dans la grille selon les lignes. La valeur de la propriété peut être un nombre positif ou négatif. Si on définit un nombre positif, la position de départ de l'élément est comptée de haut en bas. En indiquant un nombre négatif, l'élément sera positionné dans l'ordre inverse, c'est-à-dire de bas en haut.

Syntaxe

sélecteur {
	grid-row-start: nombre positif ou négatif;
}

Exemple

Définissons les positions de départ des éléments dans la grille :

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
}
#elem2 {
	grid-row-start: 2;
}
#elem3 {
	grid-row-start: 3;
}

Exemple

Maintenant, indiquons des nombres négatifs dans la propriété grid-row-start. Maintenant elem3 occupera la ligne tout en haut, et elem1 - la ligne tout en bas :

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: -1;
}
#elem2 {
	grid-row-start: -2;
}
#elem3 {
	grid-row-start: -3;
}

Exemple

Faisons en sorte que le premier bloc occupe deux lignes. Pour cela, nous aurons besoin de combiner les propriétés grid-row-start et grid-row-end :

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
	grid-row-end: 3;
}
#elem2 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem3 {
	grid-row-start: 2;
	grid-row-end: 3;
}

Exemple

Maintenant, attribuons trois lignes au quatrième bloc :

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem2 {
	grid-row-start: 2;
	grid-row-end: 3;
}
#elem3 {
	grid-row-start: 3;
	grid-row-end: 4;
}
#elem4 {
	grid-row-start: 1;
	grid-row-end: 4;
}

Voir aussi

la propriété grid-row-end,
qui définit la position de fin d'un élément dans la grille selon les lignes
la propriété grid-row,
qui définit les positions de début et de fin d'un élément dans la grille selon les lignes
la propriété grid-template-rows,
qui définit le nombre et la largeur des lignes dans la grille
la propriété grid-auto-rows,
qui définit le nombre et la largeur des lignes dans la grille implicite