A grid-column-start tulajdonság segítségével állíthatjuk be, hogy az adott gyermekelem melyik oszlopban kezdődjön.
Gyermekelem kezdőoszlopának beállítása:
kijelölő
{
grid-column-start
:
szám/kulcsszó;
}
Értéke lehet
- auto automatikus elrendezés
- szám az adott számú oszlop végére kerül
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-column-start: 2;}
.template-areas1 .a2 {grid-column-start: 3;}
.template-areas2 .a2 {grid-column-start: 2;}
.template-areas2 .a4 {grid-column-start: 2;}
.template-areas2 .a6 {grid-column-start: 2;}
</style>
</head>
<body>
<p>.a1 {grid-column-start: 2;}<br>
.a2 {grid-column-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-column-start: 2;}<br>
.a4 {grid-column-start: 2;}<br>
.a6 {grid-column-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>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ő: grid11.html