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