logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

Gyermekelem zárósora



A grid-row-end tulajdonság segítségével állíthatjuk be, hogy az adott gyermekelem hányadik sorig tartson.

Gyermekelem zárósorának beállítása:

kijelölő
{
grid-row-end
:
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 elé kerül. (Az elem után következő sor száma.)
  • span szám azoknak a sorok darabszáma, amelyekben az elem elhelyezkedik. ("összevont" sorok száma)


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-areas0 .a1 {grid-row-end: 3;} .template-areas0 .a2 {grid-row-end: 4;} .template-areas1 .a1 {grid-row-end: span 2;} .template-areas1 .a3 {grid-row-end: span 3;} .template-areas2 .a1 {grid-row-start: 2; grid-row-end: span 2;} .template-areas2 .a2 {grid-row-start: 3; grid-row-end: span 2;} .template-areas3 .a2 {grid-row-start: 2; grid-row-end: span 2;} .template-areas3 .a4 {grid-row-start: 2; grid-row-end: span 3;} .template-areas3 .a6 {grid-row-start: 2; grid-row-end: span 2;} </style> </head> <body> <p>.a1 {grid-row-end: 3;}<br> .a2 {grid-row-end: 4;}</p> <div class="divGrid template-areas0"> <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-row-end: span 2;}<br> .a3 {grid-row-end: span 3;}</p> <div class="divGrid template-areas1"> <div class="Elem a1">a1</div> <div class="Elem a2">a2</div> ... <div class="Elem a7">a7</div> </div> <p>.a1 {grid-row-start: 2; grid-row-end: span 2;}<br> .a2 {grid-row-start: 3; grid-row-end: span 2;}</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>.a2 {grid-row-start: 2; grid-row-end: span 2;}<br> .a4 {grid-row-start: 2; grid-row-end: span 3;}<br> .a6 {grid-row-start: 2; grid-row-end: 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>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ő: grid10.html


Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.