Uitlijning van inhoud langs beide assen in CSS Grid
Vaak kan het in grid nodig zijn
om de inhoud tegelijkertijd langs de horizontale
en verticale assen van de grid uit te lijnen.
Voor dit doel kunnen we de twee eigenschappen,
die je in de vorige les hebt gezien, gezamenlijk gebruiken:
justify-content en
align-content.
Start van verticale en einde van horizontale as
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: flex-end;
align-content: flex-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;
}
:
Einde van verticale en start van horizontale as
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: flex-start;
align-content: flex-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;
}
:
Midden van verticale as en horizontale as
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: flex-end;
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;
}
:
Praktische opdrachten
Maak een grid bestaande uit zes elementen en plaats ze in twee kolommen. Voer de uitlijning van de elementen uit volgens het startpunt van de horizontale as en het midden van de verticale assen van de grid.
Plaats nu de gridelementen in drie kolommen en stel de uitlijning van de elementen in op het midden van de horizontale as en het einde van de verticale assen van de grid.
Wijzig de vorige opdracht, zodat de uitlijning van de elementen plaatsvindt volgens het einde van de horizontale as en het midden van de verticale assen van de grid.
