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