Scorciatoia per l'allineamento di un singolo elemento nella griglia CSS
È possibile allineare un singolo elemento
sia lungo l'asse orizzontale che verticale simultaneamente.
A questo scopo si utilizza la proprietà place-self.
Accetta due valori separati da uno spazio.
Il primo valore specifica l'allineamento
verticale, il secondo quello orizzontale.
Diamo un'occhiata ad alcuni esempi.
Al centro verticalmente e all'inizio orizzontalmente
<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 {
place-self: center start;
}
:
All'inizio verticalmente e alla fine orizzontalmente
<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 {
place-self: start end;
}
:
Alla fine verticalmente e al centro orizzontalmente
<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 {
place-self: end center;
}
:
Compiti pratici
Crea una griglia composta da cinque elementi e posizionali su tre righe. Allinea il primo elemento all'inizio dell'asse orizzontale e al centro di quello verticale.
Modifica il compito precedente in modo che l'allineamento del terzo elemento avvenga alla fine dell'asse orizzontale e al centro di quello verticale.
Ora posiziona gli elementi della griglia su due righe e imposta l'allineamento del quinto elemento al centro dell'asse orizzontale e alla fine di quello verticale.
Fai in modo che il secondo elemento sia allineato all'inizio dell'asse orizzontale e alla fine di quello verticale, mentre il quarto elemento sia al centro dell'asse orizzontale e all'inizio di quello verticale.
