Üksiku elemendi joondamise lühend CSS gridis
Üksikut elementi saab korraga joondada
nii horisontaalselt kui ka vertikaalselt.
Selleks kasutatakse omadust place-self.
See võtab kaks väärtust tühikuga eraldatuna.
Esimeseks väärtuseks määratakse vertikaalne joondus,
teiseks horisontaalne joondus.
Vaatame näidete varal.
Vertikaalselt keskele ja horisontaalselt algusesse
<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 {
place-self: center start;
}
:
Vertikaalselt algusesse ja horisontaalselt lõppu
<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 {
place-self: start end;
}
:
Vertikaalselt lõppu ja horisontaalselt keskele
<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 {
place-self: end center;
}
:
Praktilised ülesanded
Loo grid, mis koosneb viiest elemendist ja paiguta need kolmele reale. Teosta esimese elemendi joondamine horisontaaltelje algusesse ja vertikaaltelje keskele.
Muuda eelmist ülesannet nii, et kolmanda elemendi joondamine toimuks horisontaaltelje lõppu ja vertikaaltelje keskele.
Nüüd paiguta gridi elemendid kahele reale ja määra viienda elemendi joondamine horisontaaltelje keskele ja vertikaaltelje lõppu.
Tee nii, et teine element joonduks horisontaaltelje algusesse ja vertikaaltelje lõppu, ning neljas element - horisontaaltelje keskele ja vertikaaltelje algusesse.
