Omadus place-items
Omadus place-items määrab
korraga nii veergude kui ridade joondamise,
mis vähendab oluliselt meie kasutatavat koodi.
Esimese väärtusega määrame elemendi
asukoha vertikaalsel ja teise horisontaalsel teljel.
Omadust place-items
kasutatakse vanem-elemendis.
Töö place-items-ga on mugav
vaadata läbi brauseri silumistööriista.
Süntaks
valija {
place-items: horisontaalse joonduse väärtus vertikaalse joonduse väärtus;
}
Näide . Joondamine vertikaaltelje keskpunkti ja horisontaaltelje algusesse
<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;
gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Vaatame oma gridi läbi brauseri silumistööriista:
Näide . Joondamine vertikaaltelje lõppu ja horisontaaltelje keskmesse
<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;
gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Nüüd vaatame silumistööriista paneeli:
Näide . Joondamine vertikaaltelje algusesse ja horisontaaltelje lõppu
<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;
gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Vaatame elementide joondamist lahtrites läbi brauseri silumistööriista:
Vaata ka
-
omadus
justify-items,
mis määrab elementide joondamise gridi lahtrites horisontaalteljel -
omadus
align-items,
mis määrab joondamise ristsuunalisel teljel