Scorciatoia per l'allineamento all'interno delle celle su entrambi gli assi nella CSS Grid

Con la proprietà shorthand place-items puoi allineare simultaneamente gli elementi all'interno delle celle della grid su entrambi gli assi. La proprietà accetta due valori, separati da uno spazio. Con il primo valore impostiamo il posizionamento dell'elemento sull'asse verticale, e con il secondo - sull'asse orizzontale. La proprietà viene impostata nell'elemento genitore.

Diamo un'occhiata al funzionamento di questa proprietà con alcuni esempi.

Centro verticale e inizio orizzontale

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

#parent {
	display: grid;
	place-items: center 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 grid nel tool di sviluppo:

Fine verticale e centro orizzontale

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

#parent {
	display: grid;
	place-items: end 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 grid nel tool di sviluppo:

Inizio verticale e fine orizzontale

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

#parent {
	display: grid;
	place-items: start 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;
}

Osserviamo la nostra grid nel tool di sviluppo:

Compiti pratici

Crea una grid composta da sei elementi e posizionali in due colonne. Esegui l'allineamento degli elementi sull'inizio dell'asse orizzontale e sul centro dell'asse verticale della grid.

Ora posiziona gli elementi della grid su tre colonne e imposta l'allineamento degli elementi sul centro dell'asse orizzontale e sul centro dell'asse verticale della grid.

Modifica il compito precedente in modo che l'allineamento degli elementi avvenga sulla fine dell'asse orizzontale e sull'inizio dell'asse verticale della grid.