CSS Grid-те жеке элементті екі ось бойынша туралау
Жеке элементті бір мезгілде
көлденең де, тік де осьтер бойынша
justify-self және align-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 {
justify-self: start;
align-self: center;
}
:
Көлденең осьтің ортасы бойынша және тік осьтің басы бойынша
Енді бірінші элементтің туралауын көлденең осьтің ортасы және тік осьтің басы бойынша орнатайық:
<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 {
justify-self: center;
align-self: 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 {
justify-self: end;
align-self: center;
}
:
Практикалық тапсырмалар
Алты элементтен тұратын Grid жасаңыз және оларды екі қатарға орналастырыңыз. Екінші элементтің туралауын көлденең осьтің басы және тік осьтің ортасы бойынша орындаңыз.
Енді Grid элементтерін үш қатарға орналастырыңыз және үшінші элементтің туралауын көлденең осьтің ортасы және тік осьтің соңы бойынша орнатыңыз.
Алдыңғы тапсырманы өзгертіңіз, төртінші элементтің туралауы көлденең осьтің соңы және тік осьтің ортасы бойынша болуы керек.
Енді бесінші элементтің туралауы көлденең осьтің басы және тік осьтің басы бойынша, ал алтыншы элементтің туралауы - көлденең осьтің соңы және тік осьтің ортасы бойынша болатындай етіңіз.
