Uitlijning van inhoud langs de verticale as in CSS Grid
Om inhoud uit te lijnen langs de verticale
as van het grid gebruiken we
de eigenschap align-content, die
wordt ingesteld op het ouder-element.
Aan het begin van de as
Laten we de uitlijning voor onze elementen in het grid instellen op het begin van de verticale as:
<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;
}
:
In het midden van de as
Laten we nu de uitlijning van de elementen instellen op het midden van de verticale as:
<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;
}
:
Aan het einde van de as
Laten we de uitlijning van de elementen instellen op het einde van de verticale as:
<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;
}
:
Praktische opdrachten
Maak een grid bestaande uit zes elementen, gerangschikt in twee rijen. Voer de uitlijning van de elementen uit aan het begin van de verticale as van het grid.
Plaats nu de gridelementen in twee rijen en stel de uitlijning van de elementen in op het midden van de verticale as van het grid.
Pas de vorige opdracht aan, zodat de uitlijning van de elementen plaatsvindt aan het einde van de verticale as.
