Afkorting voor uitlijning binnen cellen langs beide assen in CSS Grid
Met de shorthand-eigenschap place-items
kun je elementen tegelijkertijd uitlijnen
binnen de cellen van het grid langs beide assen.
De eigenschap accepteert twee waarden,
gescheiden door een spatie.
Met de eerste waarde geven we de positionering
van het element langs de verticale as aan, en met de tweede - langs de horizontale as.
De eigenschap wordt ingesteld in het bovenliggende element.
Laten we de werking van deze eigenschap bekijken aan de hand van voorbeelden.
In het midden van de verticale en aan het begin van de horizontale as
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
place-items: center 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;
}
:
Laten we naar ons grid kijken in de debugger:
Aan het einde van de verticale en in het midden van de horizontale as
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
place-items: end 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;
}
:
Laten we naar ons grid kijken in de debugger:
Aan het begin van de verticale en aan het einde van de horizontale as
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
place-items: start 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;
}
:
Laten we naar ons grid kijken in de debugger:
Praktische opdrachten
Maak een grid bestaande uit zes elementen en plaats ze in twee kolommen. Voer de uitlijning van de elementen uit aan het begin van de horizontale as en in het midden van de verticale as van het grid.
Plaats nu de elementen van het grid in drie kolommen en stel de uitlijning van de elementen in op het midden van de horizontale as en het midden van de verticale as van het grid.
Pas de vorige opdracht zo aan, dat de uitlijning van de elementen plaatsvindt aan het einde van de horizontale as en aan het begin van de verticale as van het grid.
