Uitlijning van een individueel element langs de verticale as van een CSS-grid
Op een vergelijkbare manier kunnen elementen
langs de verticale as worden uitgelijnd met behulp van
de eigenschap align-self.
Laten we met voorbeelden bekijken
hoe dit werkt.
Aan het begin van de verticale as
Laten we de uitlijning voor het eerste element instellen op het begin van de verticale as:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">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 {
align-self: start;
}
:
In het midden van de verticale as
Laten we de uitlijning van het eerste element instellen op het midden van de verticale as:
<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 {
align-self: center;
}
:
Aan het einde van de verticale as
Laten we de uitlijning voor ons eerste element in het grid instellen op het einde van de verticale as:
<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 {
align-self: end;
}
:
Praktische taken
Maak een grid bestaande uit vijf elementen, gerangschikt in twee kolommen. Voer de uitlijning van het derde element uit op het begin van de verticale as van het grid.
Rangschik de elementen van het grid nu in drie kolommen en stel de uitlijning van het tweede element in op het midden van de verticale as van het grid.
Wijzig de vorige taak, zodat de uitlijning van het vierde en vijfde element plaatsvindt op respectievelijk het einde en het begin van de verticale as.
