Uitlijning binnen CSS-gridcellen langs de horizontale as
Voor het uitlijnen van elementen binnen gridcellen,
d.w.z. gebieden die ontstaan bij het snijpunt van kolommen en rijen,
wordt de eigenschap justify-items gebruikt, die
wordt ingesteld in het bovenliggende element.
De uitlijning is het duidelijkst zichtbaar
bij het bekijken van het grid in de browserdebugger.
Aan het begin van de as
Laten we onze elementen uitlijnen binnen de cellen 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;
justify-items: start;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
height: 200px;
width: 400px;
border: 2px solid #696989;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Laten we nu naar ons grid kijken in de debugger:
In het midden van de as
Laten we onze elementen in de cellen in het midden van de horizontale as uitlijnen:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-items: center;
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;
}
:
Laten we nu naar ons grid kijken in de debugger:
Aan het einde van de as
Laten we onze elementen aan het einde van de horizontale as uitlijnen:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-items: end;
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;
}
:
Laten we nu naar ons grid kijken in de debugger:
Praktische taken
Maak een grid bestaande uit vijf elementen, gerangschikt over drie rijen. Voer de uitlijning van de elementen langs de horizontale as uit.
Plaats nu de gridelementen over twee rijen en stel de uitlijning van de elementen in de cellen in het midden van de horizontale as in.
Wijzig de vorige taak, zodat de uitlijning van de elementen aan het einde van de horizontale as plaatsvindt.
