Allineamento del contenuto lungo l'asse verticale nella griglia CSS
Per allineare il contenuto lungo l'asse verticale
della griglia utilizziamo
la proprietà align-content, che
viene impostata sull'elemento genitore.
All'inizio dell'asse
Impostiamo l'allineamento per i nostri elementi nella griglia 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-content: 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;
}
:
Al centro dell'asse
Ora impostiamo l'allineamento degli elementi 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-content: 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;
}
:
Alla fine dell'asse
Impostiamo l'allineamento degli elementi alla fine 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-content: 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;
}
:
Compiti pratici
Crea una griglia composta da sei elementi, disposti in due righe. Esegui l'allineamento degli elementi all'inizio dell'asse verticale della griglia.
Ora disponi gli elementi della griglia in due righe e imposta l'allineamento degli elementi al centro dell'asse verticale della griglia.
Modifica il compito precedente, in modo che l'allineamento degli elementi avvenga alla fine dell'asse verticale.
