VISSZA
MENÜ
TOVÁBBA 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