Atskiro elemento lygiavimo santrumpa CSS tinkle
Galima vienu metu lygiuoti atskirą elementą
tiek horizontalioje, tiek vertikalioje ašyse.
Tam naudojama place-self savybė.
Ji priima dvi reikšmes, atskirtas tarpu.
Pirmoji reikšmė nurodo vertikalųjį lygiavimą,
o antroji - horizontalųjį.
Pažiūrėkime pavyzdžius.
Vertikaliai centre ir horizontaliai pradžioje
<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;
}
:
Vertikaliai pradžioje ir horizontaliai pabaigoje
<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;
}
:
Vertikaliai pabaigoje ir horizontaliai centre
<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;
}
:
Praktinės užduotys
Sukurkite tinklelį, susidedantį iš penkių elementų ir išdėstykite juos trimis eilėmis. Atlikite pirmojo elemento lygiavimą horizontaliosios ašies pradžioje ir vertikaliosios ašies centre.
Pakeiskite ankstesnę užduotį taip, kad trečiasis elementas būtų lygiuojamas horizontaliosios ašies pabaigoje ir vertikaliosios ašies centre.
Dabar išdėstykite tinklelio elementus dviem eilėmis ir nustatykite penktojo elemento lygiavimą horizontaliosios ašies centre ir vertikaliosios ašies pabaigoje.
Pasidarykite taip, kad antrasis elementas būtų lygiuojamas horizontaliosios ašies pradžioje ir vertikaliosios ašies pabaigoje, o ketvirtasis elementas - horizontaliosios ašies centre ir vertikaliosios ašies pradžioje.
