Allineamento su entrambi gli assi all'interno delle celle della griglia CSS

È possibile impostare simultaneamente l'allineamento degli elementi all'interno delle celle della griglia sia sull'asse orizzontale che su quello verticale. A questo scopo possiamo combinare le due proprietà justify-items e align-items, che vengono impostate nell'elemento genitore.

Al centro degli assi

Allineiamo i nostri elementi al centro degli assi orizzontale e verticale:

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

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Ora diamo un'occhiata alla nostra griglia nel debugger:

All'inizio dell'orizzontale e alla fine della verticale

Posizioniamo i nostri elementi all'interno delle celle all'inizio dell'asse orizzontale e alla fine dell'asse verticale:

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

#parent {
	display: grid;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Ora diamo un'occhiata alla nostra griglia nel debugger:

Alla fine dell'orizzontale e all'inizio della verticale

Posizioniamo i nostri elementi all'interno delle celle alla fine dell'asse orizzontale e all'inizio dell'asse verticale:

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

#parent {
	display: grid;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Ora diamo un'occhiata alla nostra griglia nel debugger:

Compiti pratici

Crea una griglia, composta da cinque elementi, posizionati su tre righe. Esegui l'allineamento degli elementi all'interno delle celle all'inizio dell'asse orizzontale e al centro dell'asse verticale.

Ora posiziona gli elementi della griglia su due righe e imposta l'allineamento degli elementi all'interno delle celle al centro dell'asse orizzontale e all'inizio dell'asse verticale.

Modifica il compito precedente, in modo che l'allineamento degli elementi avvenga alla fine dell'asse orizzontale e al centro dell'asse verticale.