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

Sorok távolsága



A grid-row-gap tulajdonság segítségével adhatjuk meg a sorok közötti távolságot.

Sorok távolságának beállítása:

kijelölő
{
grid-row-gap
:
méret;
}


A méret beállításainál használhatjuk a CSS3-ban korábban megismert mértékegységeket. Grid konténeren belül kapunk egy lehetőséget is a sorszélesség/sormagasság beállítására is: fraction

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: 180px; display: grid; grid-template-columns: 1fr 2fr 3fr; grid-column-gap: 12px; grid-template-rows: 1fr 1fr; } .row-gap_a { grid-row-gap: 10px; } .row-gap_b { grid-row-gap: 10%; } </style> </head> <body> <p>grid-row-gap: 10px;</p> <div class="divGrid row-gap_a" > <div class="Elem">1</div> <div class="Elem">2</div> <div class="Elem">3</div> <div class="Elem">4</div> <div class="Elem">5</div> <div class="Elem">6</div> </div> <p>grid-row-gap: 10%;</p> <div class="divGrid row-gap_b"> <div class="Elem">1</div> <div class="Elem">2</div> <div class="Elem">3</div> <div class="Elem">4</div> <div class="Elem">5</div> <div class="Elem">6</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ő: grid6.html


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