Numero e larghezza delle righe nelle griglie CSS

Gli elementi della griglia possono anche essere posizionati per righe. A questo scopo è dedicata la proprietà grid-template-rows. Questa proprietà accetta le dimensioni delle righe separate da spazi. In essa si possono applicare gli stessi valori che abbiamo studiato anche per le colonne.

Esempio

Ad esempio, posizioniamo i blocchi in quattro righe:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 50px 100px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Esempio

Specifichiamo per la prima e la terza riga una larghezza fissa in pixel, e lasciamo che la seconda riga occupi lo spazio rimanente:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 100px auto 60px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Esempio

Usiamo la funzione repeat per specificare le dimensioni delle righe:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Esempio

Assegniamo alle righe un'altezza di 50px, e impostiamo il numero di righe automaticamente utilizzando il valore auto-fill:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(auto-fill, 50px);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Compiti pratici

Posiziona i blocchi in tre righe. Lascia che il primo blocco abbia una dimensione di 100px, il secondo di 150px, e il terzo di 200px.

Lascia che nella tua griglia ci siano tre righe. Fai in modo che abbiano la stessa larghezza.