Allineamento di un singolo elemento lungo l'asse verticale di una griglia CSS
Allo stesso modo, è possibile allineare gli elementi
lungo l'asse verticale utilizzando la
proprietà align-self.
Diamo un'occhiata ad alcuni esempi
per vedere come funziona.
All'inizio dell'asse verticale
Impostiamo l'allineamento per il primo elemento all'inizio dell'asse verticale:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
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;
}
#elem1 {
align-self: start;
}
:
Al centro dell'asse verticale
Impostiamo l'allineamento del primo elemento al centro dell'asse verticale:
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
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;
}
#elem1 {
align-self: center;
}
:
Alla fine dell'asse verticale
Impostiamo l'allineamento del nostro primo elemento nella griglia alla fine dell'asse verticale:
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
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;
}
#elem1 {
align-self: end;
}
:
Compiti pratici
Crea una griglia composta da cinque elementi, disposti in due colonne. Esegui l'allineamento del terzo elemento all'inizio dell'asse verticale della griglia.
Ora disponi gli elementi della griglia in tre colonne e imposta l'allineamento del secondo elemento al centro dell'asse verticale della griglia.
Modifica il compito precedente, in modo che l'allineamento del quarto e del quinto elemento avvenga rispettivamente alla fine e all'inizio dell'asse verticale della griglia.
