Мӯҳтавиёро дар ҳар ду меҳвар дар CSS Grid ҷобаҷогузорӣ кардан
Аксар вақт дар Grid эҳтиёҷ ба ҳамзамон ҷобаҷогузор кардани мӯҳтавӣ
дар меҳвари уфуқӣ ва амудии Grid рух медиҳад.
Барои ин мақсад мо метавонем якҷоя истифода барем
аз ду хусусияте, ки шумо дар дарси қаблӣ омӯхтед:
justify-content ва
align-content.
Аз оғози меҳвари амудӣ ва поёни меҳвари уфуқӣ
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: flex-end;
align-content: flex-start;
grid-template-columns: 100px 100px;
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;
}
:
Аз поёни меҳвари амудӣ ва оғози меҳвари уфуқӣ
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: flex-start;
align-content: flex-end;
grid-template-columns: 100px 100px;
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;
}
:
Дар маркази меҳвари амудӣ ва уфуқӣ
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: flex-end;
align-content: center;
grid-template-columns: 100px 100px;
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;
}
:
Масъалаҳои амалӣ
Grid-е созед, ки аз шаш унсур иборат буда ва онҳоро дар ду сутун ҷойгир кунед. Ҷобаҷогузории унсурҳоро аз оғози меҳвари уфуқӣ ва маркази меҳвари амудии Grid иҷро намоед.
Акнун унсурҳои Grid-ро дар се сутун ҷойгир кунед ва ҷобаҷогузории унсурҳоро дар маркази меҳвари уфуқӣ ва поёни меҳвари амудии Grid таъин кунед.
Масъалаи қаблиро тағир диҳед, то ки ҷобаҷогузории унсурҳо аз поёни меҳвари уфуқӣ ва маркази меҳвари амудии Grid сурат гирад.
