A grid-row összevont tulajdonság segítségével egy lépésben állíthatjuk be a grid-row-start és a grid-row-end tulajdonságokat.
Gyermekelem függőleges pozíciója:
kijelölő
{
grid-row
:
grid-row-start
/
grid-row-end;
}
1. Példa:
Forráskód
<head>
...
<style>
...
.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: 2 / 4;}
.template-areas1 .a2 {grid-row: 3 / 5;}
.template-areas2 .a2 {grid-row: 2 / 4;}
.template-areas2 .a4 {grid-row: 2 / 5;}
.template-areas2 .a6 {grid-row: 2 / 4;}
.template-areas3 .a1 {grid-row: 2 / span 2;}
.template-areas3 .a2 {grid-row: 3 / span 2;}
.template-areas4 .a2 {grid-row: 2 / span 2;}
.template-areas4 .a4 {grid-row: 2 / span 3;}
.template-areas4 .a6 {grid-row: 2 / span 2;}
</style>
</head>
<body>
<p>.a1 {grid-row: 2 / 4;}<br>
.a2 {grid-row: 3 / 5;} </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 class="Elem a7">a7</div>
</div>
<p>.a2 {grid-row: 2 / 4;}<br>
.a4 {grid-row: 2 / 5;}<br>
.a6 {grid-row: 2 / 4;}</p>
<div class="divGrid template-areas2">
<div class="Elem a1">a1</div>
<div class="Elem a2">a2</div>
...
<div class="Elem a7">a7</div>
</div>
<p>.a1 {grid-row: 2 / span 2;}<br>
.a2 {grid-row: 3 / span 2;}</p>
<div class="divGrid template-areas3">
<div class="Elem a1">a1</div>
<div class="Elem a2">a2</div>
...
<div class="Elem a7">a7</div>
</div>
<p>.a2 {grid-row: 2 / span 2;} <br>
.a4 {grid-row: 2 / span 3;}<br>
.a6 {grid-row: 2 / span 2;}</p>
<div class="divGrid template-areas4">
<div class="Elem a1">a1</div>
<div class="Elem a2">a2</div>
...
<div class="Elem a7">a7</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ő: grid15.html