⊗mkSpGdCVA 112 of 128 menu

Дарозкунии дохили ҳуҷраҳои 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 таъин кунед.

Масъалаи қаблӣро тавре тағйир диҳед, ки дарозкунии элементҳо дар охири меҳвари амудӣ рӯй диҳад.

Тоҷикӣ
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Мо барои коркарди сомона, таҳлил ва шахсӣ кардан аз cookie истифода мебарем. Коркарди маълумот мувофиқи Сиёсати махфият сурат мегирад.
ҳамаро қабул кардан танзим кардан рад кардан