217 of 313 menu

Својство grid-template-areas

Својство grid-template-areas дефинише распоређивање елемената у grid-у. Најпре сваком елементу-детету доделимо име користећи својство grid-area. Затим у елементу-родитељу наводимо својство grid-template-areas, у ком набрајамо имена елемената-деце по реду којим желимо да их распоредимо у grid-у.

Синтакса

селектор { grid-template-areas: имена елемената-деце; }

Пример

Хајде да дефинишемо распоред наших елемената у grid-у:

<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> </div> #elem1 { grid-area: first; } #elem2 { grid-area: second; } #elem3 { grid-area: third; } #parent { display: grid; grid-template-areas: 'second first third'; border: 2px solid #696989; padding: 10px; } #parent > div { padding: 10px; border: 1px solid #696989; }

:

Пример

А сада хајде да уместо имена неких елемената наведемо тачку '.'. Као што се види из резултата извршеног кода у овом случају у шеми ће се наћи празан блок:

<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> </div> #elem1 { grid-area: first; } #elem2 { grid-area: second; } #elem3 { grid-area: third; } #parent { display: grid; grid-template-areas: 'first . second third'; border: 2px solid #696989; padding: 10px; } #parent > div { padding: 10px; border: 1px solid #696989; }

:

Погледајте такође

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