CSS Grid-те жеке элементті туралаудың қысқартылған тәсілі
Жеке элементті бір уақытта көлденең және тік осьтер бойынша туралауға болады.
Бұл үшін place-self қасиеті қолданылады.
Ол бос орын арқылы бөлінген екі мәнді қабылдайды.
Бірінші мән тік бағыттағы туралауды көрсетеді,
ал екіншісі - көлденең бағыттағы туралауды.
Мысалдар арқылы қарастырайық.
Тік ортасы және көлденең басы бойынша
<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;
}
:
Тік басы және көлденең соңы бойынша
<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;
}
:
Тік соңы және көлденең ортасы бойынша
<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;
}
:
Практикалық тапсырмалар
Бес элементтен тұратын grid жасаңыз және оларды үш қатарға орналастырыңыз. Бірінші элементті көлденең осьтің басы және тік осьтің ортасы бойынша туралаңыз.
Алдыңғы тапсырманы үшінші элементтің туралауы көлденең осьтің соңы және тік осьтің ортасы бойынша болғандай етіп өзгертіңіз.
Енді grid элементтерін екі қатарға орналастырып, бесінші элементтің туралауын көлденең осьтің ортасы және тік осьтің соңы бойынша орнатыңыз.
Екінші элемент көлденең осьтің басы және тік осьтің соңы бойынша, ал төртінші элемент көлденең осьтің ортасы және тік осьтің басы бойынша тураланғандай етіп жасаңыз.
