Fusion des rangées dans les grilles CSS

Les rangées et les colonnes dans les grilles forment une grille. Il est possible de faire en sorte qu'un élément occupe non pas une seule cellule de la grille, mais plusieurs.

Pour qu'un élément occupe plus d'une rangée, il faut lui définir la propriété grid-row. Dans cette propriété, séparées par une barre oblique, sont spécifiés les nombres indiquant la position de départ et la position de fin de l'élément dans la grille.

Ainsi, l'élément s'étendra de la première position à la deuxième position (sans l'inclure). C'est-à-dire que la valeur 1 / 2 forcera l'élément à occuper une seule première cellule, et la valeur 1 / 3 forcera l'élément à occuper la première et la deuxième cellule (mais sans inclure la troisième).

Exemple

Supposons que nous ayons une grille avec trois éléments enfants. Plaçons-les de manière à ce que le premier élément occupe deux rangées :

<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: 1 / 3; /* deux rangées */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
}

Exemple

Maintenant, assignons au quatrième bloc trois rangées :

<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: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}
#elem4 {
	grid-row: 1 / 4;
}

Tâches pratiques

Placez tous les éléments et effectuez la fusion des rangées conformément à l'exemple suivant :