Afkorting vir belyning binne selle op albei asse in CSS-rooster
Met behulp van die verkorte eienskap place-items
kan jy elemente gelyktydig binne
roosterselle op albei asse belyn.
Die eienskap aanvaar twee waardes,
geskei deur 'n spasie.
Met die eerste waarde stel ons die plasing
van die element op die vertikale as, en met die tweede - op die horisontale as.
Die eienskap word in die ouerelement gestel.
Kom ons kyk na die werking van hierdie eienskap met voorbeelde.
Sentraal op vertikale en begin van horisontale
<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;
}
:
Kom ons kyk na ons rooster in die ontfoutingsgeredskap:
Einde van vertikale en sentraal op horisontale
<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;
}
:
Kom ons kyk na ons rooster in die ontfoutingsgeredskap:
Begin van vertikale en einde van horisontale
<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;
}
:
Kom ons kyk na ons rooster in die ontfoutingsgeredskap:
Praktiese take
Skep 'n rooster wat uit ses elemente bestaan en plaas hulle in twee kolomme. Voer belyning van die elemente uit op die begin van die horisontale en sentraal van die vertikale asse van die rooster.
Plaas nou die roosterelemente in drie kolomme en stel die belyning van die elemente op sentraal van die horisontale en sentraal van die vertikale asse van die rooster.
Verander die vorige taak sodat die belyning van die elemente plaasvind op die einde van die horisontale en begin van die vertikale asse van die rooster.
