Allineamento del contenuto lungo l'asse orizzontale nella griglia CSS

Nella griglia potrebbe essere necessario non solo posizionare, ma anche allineare il contenuto lungo l'asse orizzontale della griglia. In questo caso utilizziamo la proprietà justify-content, che viene impostata sull'elemento genitore. Vediamo con esempi come funziona questa proprietà.

All'inizio dell'asse

Impostiamo l'allineamento per i nostri elementi all'inizio dell'asse orizzontale:

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

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}

Al centro dell'asse

Ora impostiamo l'allineamento per i nostri elementi al centro dell'asse orizzontale:

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

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}

Alla fine dell'asse

Impostiamo l'allineamento per i nostri elementi alla fine dell'asse orizzontale:

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

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}

Compiti pratici

Crea una griglia composta da sei elementi, disposti in due colonne. Esegui l'allineamento degli elementi all'inizio dell'asse orizzontale della griglia.

Ora disponi gli elementi della griglia in tre colonne e imposta l'allineamento degli elementi al centro dell'asse orizzontale della griglia.

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