Gyermekelemek pozíciói - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

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

. . .

}

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