VISSZA
MENÜ
TOVÁBBA grid-area összevont tulajdonság segítségével állíthatjuk be a gyermekelem rácsban elfoglalt pozícióját, vagy adhatunk számára egy nevet, amelyet a Grid konténeren a grid-template-areas tulajdonsággal használhatunk pozicionálásra.
Gyermekelem pozíciója:
kijelölő
{
grid-area
:
grid-row-start
/
grid-column-start
/
grid-row-end
/
grid-column-end;
}
Gyermekelem neve:
kijelölő
{
grid-area
:
elem neve;
}
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;
}
.template-areas1 .a1 {grid-area: 1 / 1 / span 2 / span 2;}
.template-areas1 .a2 {grid-area: 1 / 4 / span 2 / span 1;}
.template-areas2 .a1 {grid-area: 1 / 1 / span 1 / span 4;}
.template-areas2 .a3 {grid-area: 2 / 2 / span 2 / span 1;}
.template-areas2 .a4 {grid-area: 2 / 3 / span 2 / span 2;}
.template-areas2 .a6 {grid-area: 4 / 1 / span 1 / span 4;}
.template-areas3 .a1 {grid-area: 1 / 1 / span 1 / span 4;}
.template-areas3 .a2 {grid-area: 4 / 1 / span 1 / span 4;}
.template-areas3 .a3 {grid-area: 2 / 1 / span 2 / span 1;}
.template-areas3 .a4 {grid-area: 2 / 2 / span 2 / span 2;}
</style>
</head>
<body>
<p>.a1 {grid-area: 1 / 1 / span 2 / span 2;}<br>
.a2 {grid-area: 1 / 4 / span 2 / span 1;}</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>.a1 {grid-area: 1 / 1 / span 1 / span 4;}<br>
.a2 {grid-area: 4 / 1 / span 1 / span 4;}<br>
.a3 {grid-area: 2 / 2 / span 2 / span 1;}<br>
.a4 {grid-area: 2 / 3 / span 2 / span 2;}</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>.a1 {grid-area: 1 / 1 / span 1 / span 4;}<br>
.a2 {grid-area: 4 / 1 / span 1 / span 4;}<br>
.a3 {grid-area: 2 / 1 / span 2 / span 1;}<br>
.a4 {grid-area: 2 / 2 / span 2 / span 2;}</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ő: grid8.html