Як элементи алоҳидаро дар ҳарду меҳвари 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-ро дар се қатор ҷойгир кунед ва мувофиқшавии элементи сеюмро бо маркази меҳвари уфуқӣ ва охири меҳвари амудӣ муқаррар кунед.
Вазифаи гузаштаро тағир диҳед, то ки мувофиқшавии элементи чорум бо охири меҳвари уфуқӣ ва маркази меҳвари амудӣ сурат гирад.
Ҳоло чунон кунед, ки мувофиқшавии элементи панҷум бо оғози меҳвари уфуқӣ ва оғози меҳвари амудӣ сурат гирад, ва элементи шашум - бо охири меҳвари уфуқӣ ва маркази меҳвари амудӣ.
