A grid-row-start tulajdonság segítségével állíthatjuk be, hogy az adott gyermekelem melyik sorban kezdődjön.
Gyermekelem kezdősorának beállítása:
kijelölő
{
grid-row-start
:
szám/kulcsszó;
}
Értéke lehet
- auto az első még nem teljesen feltöltött sor végére kerül
- szám az adott számú sor végére kerül
1. Példa:
Forráskód
<head>
...
<style>
...
.Elem {
padding: 5px 0px;
border:1px solid #066;
background-color:#fff;
text-align:center;
}
.divGrid {
padding: 0px 0px;
height: 200px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 2px;
}
.template-areas1 .a1 {grid-row-start: 2;}
.template-areas1 .a2 {grid-row-start: 3;}
.template-areas2 .a2 {grid-row-start: 2;}
.template-areas2 .a4 {grid-row-start: 2;}
.template-areas2 .a6 {grid-row-start: 2;}
.template-areas3 .a1 {grid-row-start: 1;}
.template-areas3 .a2 {grid-row-start: 2;}
.template-areas3 .a3 {grid-row-start: 3;}
.template-areas3 .a4 {grid-row-start: 4;}
</style>
</head>
<body>
<p>.a1 {grid-row-start: 2;}<br>
.a2 {grid-row-start: 3;}</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>.a2 {grid-row-start: 2;} <br>
.a4 {grid-row-start: 2;}<br>
.a6 {grid-row-start: 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-row-start: 1;}<br>
.a2 {grid-row-start: 2;}<br>
.a3 {grid-row-start: 3;}<br>
.a4 {grid-row-start: 4;}</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ő: grid9.html