Afkorting voor uitlijning van een individueel element in CSS Grid
Je kunt een individueel element tegelijkertijd
uitlijnen op zowel de horizontale als de verticale assen.
Hiervoor wordt de eigenschap place-self gebruikt.
Het accepteert twee waarden gescheiden door een spatie.
De eerste waarde geeft de uitlijning op de verticale as aan,
en de tweede - op de horizontale as.
Laten we eens kijken naar voorbeelden.
Gecentreerd verticaal en start horizontaal
<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;
}
:
Start verticaal en einde horizontaal
<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;
}
:
Einde verticaal en gecentreerd horizontaal
<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;
}
:
Praktische opdrachten
Maak een grid bestaande uit vijf elementen en plaats ze over drie rijen. Voer uitlijning van het eerste element uit op start van de horizontale as en center van de verticale as.
Pas de vorige opdracht aan zodat de uitlijning van het derde element plaatsvindt op einde van de horizontale as en center van de verticale as.
Plaats nu de grid-elementen over twee rijen en stel de uitlijning van het vijfde element in op center van de horizontale as en einde van de verticale as.
Zorg ervoor dat het tweede element wordt uitgelijnd op start van de horizontale as en einde van de verticale as, en het vierde element - op center van de horizontale as en start van de verticale as.
