227 of 313 menu

Place-items aýratynlygy

place-items aýratynlygy sütünleriň we hatarlaryň ýerleşişini bir wagtda kesgitleýär, bu bolsa ulanylan kodymyzy göwrümçe azaldýar. Birinji baha bilen elementleriň wertikal, ikinjisi bilen bolsa gorizontal ok boýunça ýerleşişini kesgitleýäris. place-items aýratynlygy ata-elementde kesgitlenilýär. place-items bilen işlemek netijesini brauzeriň düzediji paneli arkaly gözlemek amatlydyr.

Sintaksis

selektor { place-items: gorizontal oka görä ýerleşiş bahasy wertikal oka görä ýerleşiş bahasy; }

Mysal . Wertikal ok boýunça merkeze we gorizontal ok boýunça başlangyja ýerleşiş

<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> #parent { display: grid; place-items: center start; grid-template-columns: 100px 100px; gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; } #parent > div { gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; }

:

Gridimizi brauzeriň düzediji paneli arkaly gözleýäli:

Mysal . Wertikal ok boýunça ahyryna we gorizontal ok boýunça merkeze ýerleşiş

<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> #parent { display: grid; place-items: end center; grid-template-columns: 100px 100px; gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; } #parent > div { gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; }

:

Indi bolsa düzediji paneline göz aýlapaýly:

Mysal . Wertikal ok boýunça başlangyja we gorizontal ok boýunça ahyryna ýerleşiş

<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> #parent { display: grid; place-items: start end; grid-template-columns: 100px 100px; gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; } #parent > div { gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; }

:

Elementleriň öýjüklerde ýerleşişini brauzeriň düzediji paneli arkaly gözleýäli:

Şeýle-de görüň

  • justify-items aýratynlygy,
    grid öýjükleriniň içindäki elementleriň gorizontal ok boýunça ýerleşişini kesgitleýär
  • align-items aýratynlygy,
    çatryk ok boýunça ýerleşişi kesgitleýär
Türkmen
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkçeЎзбекOʻzbekTiếng Việt
Biz sahypanyň işlemegi, analitika we şahsyýetleşdirmek üçin cookie ulanýarys. Maglumatlaryň işlenişi Gizlinlik syýasaty boýunça amala aşyrylýar.
hemmesini kabul et sazlamak ret et