Дарозкунии дохили ҳуҷраҳои CSS Grid дар меҳвари амудӣ
Барои дароз кардани элементҳо дар дохили ҳуҷраҳои Grid
дар меҳвари амудӣ, мо аз
хосияти align-items истифода мебарем, ки
дар элементи волидайн таъин карда мешавад. Коркарди ин хосият
дар вақти дидани Grid дар воситаи таҳлили
браузер мушоҳида кардан мумкин аст.
Дар оғози меҳвар
Биёед элементҳои худро дар дохили ҳуҷраҳо дар оғози меҳвари амудӣ дароз кунем:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-items: 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;
}
:
Биёед ба Grid-и худ дар воситаи таҳлили браузер нигарем:
Дар маркази меҳвар
Ва акнун элементҳои худро дар ҳуҷраҳо дар маркази меҳвари амудӣ дароз кунем:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-items: 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-и худ дар воситаи таҳлили браузер нигарем:
Дар охири меҳвар
Бори дигар дарозкунии элементҳоро иваз кунем, ин дафъа дар охири меҳвари амудӣ:
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-items: 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;
}
#elem1 {
}
:
Биёед ба Grid-и худ дар воситаи таҳлили браузер нигарем:
Масъалаҳои амалӣ
Grid-е созед, ки аз шаш элемент иборат бошад, ки дар ду сутун ҷойгир шудаанд. Дарозкунии элементҳоро дар дохили ҳуҷраҳо дар оғози меҳвари амудӣ иҷро кунед.
Акнун элементҳои Grid-ро дар се сутун ҷойгир кунед ва дарозкунии элементҳоро дар ҳуҷраҳо дар маркази меҳвари амудии Grid таъин кунед.
Масъалаи қаблӣро тавре тағйир диҳед, ки дарозкунии элементҳо дар охири меҳвари амудӣ рӯй диҳад.
