Unione di righe nelle griglie CSS

Le righe e le colonne nelle griglie formano una rete. È possibile fare in modo che un elemento occupi non una cella della griglia, ma più celle.

Per far sì che un elemento occupi più di una riga, gli deve essere assegnata la proprietà grid-row. In questa proprietà, attraverso una barra, vengono specificati i numeri che indicano la posizione iniziale e finale degli elementi nella griglia.

In questo caso, l'elemento si estenderà dalla prima posizione alla seconda posizione (senza includerla). Cioè il valore 1 / 2 farà sì che l'elemento occupi una sola prima cella, mentre il valore 1 / 3 farà sì che l'elemento occupi la prima e la seconda cella (ma non includendo la terza).

Esempio

Supponiamo di avere una griglia con tre elementi figli. Posizioniamoli in modo che il primo elemento occupi due righe:

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

Esempio

Ora assegniamo al quarto blocco tre righe:

<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;
}

Compiti pratici

Posiziona tutti gli elementi e esegui l'unione delle righe in conformità con il seguente esempio: