Allineamento all'interno delle celle della griglia CSS lungo l'asse orizzontale
Per allineare gli elementi all'interno delle celle della griglia,
cioè le aree che si creano all'intersezione tra colonne e righe,
si utilizza la proprietà justify-items, che
viene impostata sull'elemento genitore.
L'allineamento è più evidente
quando si visualizza la griglia negli strumenti di sviluppo del browser.
All'inizio dell'asse
Allineiamo i nostri elementi all'interno delle celle 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-items: start;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
height: 200px;
width: 400px;
border: 2px solid #696989;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Ora diamo un'occhiata alla nostra griglia negli strumenti di sviluppo:
Al centro dell'asse
Allineiamo i nostri elementi nelle celle 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-items: 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;
}
:
Ora diamo un'occhiata alla nostra griglia negli strumenti di sviluppo:
Alla fine dell'asse
Allineiamo 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-items: 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;
}
:
Ora diamo un'occhiata alla nostra griglia negli strumenti di sviluppo:
Compiti pratici
Crea una griglia composta da cinque elementi, posizionati su tre righe. Esegui l'allineamento degli elementi lungo l'asse orizzontale.
Ora posiziona gli elementi della griglia su due righe e imposta l'allineamento degli elementi nelle celle al centro dell'asse orizzontale.
Modifica il compito precedente, in modo che l'allineamento degli elementi avvenga alla fine dell'asse orizzontale.
