Allineamento all'interno delle celle della griglia CSS lungo l'asse verticale

Per allineare gli elementi all'interno delle celle della griglia lungo l'asse verticale utilizziamo la proprietà align-items, che viene impostata sull'elemento genitore. Il funzionamento di questa proprietà può essere visualizzato ispezionando la griglia negli strumenti di sviluppo del browser.

All'inizio dell'asse

Allineiamo i nostri elementi all'interno delle celle all'inizio dell'asse verticale:

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

#parent {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 100px 100px;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Osserviamo la nostra griglia negli strumenti di sviluppo del browser:

Al centro dell'asse

Ora allineiamo i nostri elementi all'interno delle celle al centro dell'asse verticale:

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

#parent {
	display: grid;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Osserviamo la nostra griglia negli strumenti di sviluppo del browser:

Alla fine dell'asse

Modifichiamo nuovamente l'allineamento degli elementi, questa volta alla fine dell'asse verticale:

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

#parent {
	display: grid;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	
}

Osserviamo la nostra griglia negli strumenti di sviluppo del browser:

Compiti pratici

Crea una griglia composta da sei elementi, disposti in due colonne. Implementa l'allineamento degli elementi all'interno delle celle all'inizio dell'asse verticale.

Ora disponi gli elementi della griglia in tre colonne e imposta l'allineamento degli elementi all'interno delle celle al centro dell'asse verticale della griglia.

Modifica il compito precedente in modo che l'allineamento degli elementi avvenga alla fine dell'asse verticale.