logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

Gyermekelemek pozíciói



A grid-template-area összevont tulajdonság segítségével állíthatjuk be a gyermekelemek pozícióit a grid-template-area tulajdonságuknál megadott nevükre hivatkozva.
  • Idézőjelek között soroljuk fel az egymást követő "cellákba" helyezni kívánt gyermekelemek neveit.
  • Mindezt annyiszor ismételjük, ahány sorral dolgozunk.


Gyermekelemek pozíciói:

kijelölő
{
grid-template-areas
:
"
elemnév
elemnév
. . .
"
"
elemnév
elemnév
. . .
"
}




1. Példa:

Forráskód



 
<head> ... <style> ... .divGrid { padding: 0px 0px; height: 200px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 2px; grid-template-rows: 1fr 1fr 1fr 1fr; grid-row-gap: 2px; } .a1 {grid-area: a1;} .a2 {grid-area: a2;} .a3 {grid-area: a3;} .a4 {grid-area: a4;} .a5 {grid-area: a5;} .a6 {grid-area: a6;} .template-areas1 { grid-template-areas: "a1 a1 a1 a1" "a2 a3 a3 a4" "a2 a5 a5 a4" "a6 a6 a6 a6"; } .template-areas2 { grid-template-areas: "a1 a1 a1 a1" "a2 a3 a3 a3" "a5 a5 a5 a4" "a6 a6 a6 a6"; } .template-areas3 { grid-template-areas: "a6 a6 a6 a6" "a1 a2 . a5" "a3 a3 a4 a4" "a3 a3 a4 a4"; } </style> </head> <body> <p>grid-template-areas:<br> "a1 a1 a1 a1"<br> "a2 a3 a3 a4"<br> "a2 a5 a5 a4"<br> "a6 a6 a6 a6";</p> <div class="divGrid template-areas1"> <div class="Elem a1">a1</div> <div class="Elem a2">a2</div> <div class="Elem a3">a3</div> <div class="Elem a4">a4</div> <div class="Elem a5">a5</div> <div class="Elem a6">a6</div> </div> <p>grid-template-areas:<br> "a1 a1 a1 a1"<br> "a2 a3 a3 a3"<br> "a5 a5 a5 a4"<br> "a6 a6 a6 a6"; </p> <div class="divGrid template-areas2"> <div class="Elem a1">a1</div> <div class="Elem a2">a2</div> ... <div class="Elem a6">a6</div> </div> <p>grid-template-areas:<br> "a6 a6 a6 a6"<br> "a1 a2 . a5"<br> "a3 a3 a4 a4"<br> "a3 a3 a4 a4";</p> <div class="divGrid template-areas3"> <div class="Elem a1">a1</div> <div class="Elem a2">a2</div> ... <div class="Elem a6">a6</div> </div> <p>4*4-es rácsszerkezet</p> <div class="divGrid " > <div class="Elem">1</div> <div class="Elem">2</div> ... <div class="Elem">16</div> </div> </body> </html>

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: grid7.html


Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.