VISSZA
MENÜ
TOVÁBBA grid-column-gap tulajdonság segítségével adhatjuk meg az oszlopok közötti távolságot.
Oszlopok távolságának beállítása:
kijelölő
{
grid-column-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>
...
.divGrid {
padding: 10px 0px;
display: grid;
}
.columns_a {
grid-template-columns: auto auto auto;
}
.columns_b {
grid-template-columns: 20% 30% 50%;
}
.columns_c {
grid-template-columns: 18% 28% 48%;
}
.columns_d {
grid-template-columns:
calc(20% - 8px)
calc(30% - 8px)
calc(50% - 8px);
}
.column-gap_a {
grid-column-gap: 12px;
}
.column-gap_b {
grid-column-gap: 3%;
}
</style>
</head>
<body>
<p>grid-template-columns: auto auto auto;<br>
grid-column-gap: 12px;</p>
<div class="divGrid columns_a column-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-template-columns: 20% 30% 50%;<br>
grid-column-gap: 12px;</p>
<div class="divGrid columns_b column-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-template-columns: calc(20% - 8px)<br>
calc(30% - 8px) calc(50% - 8px);<br>
grid-column-gap: 12px;</p>
<div class="divGrid columns_d column-gap_a">
<div class="Elem">1</div>
<div class="Elem">2</div>
...
<div class="Elem">6</div>
</div>
<p>grid-template-columns: auto auto auto;<br>
grid-column-gap: 3%;</p>
<div class="divGrid columns_a column-gap_b">
<div class="Elem">1</div>
<div class="Elem">2</div>
...
<div class="Elem">6</div>
</div>
<p>grid-template-columns: 18% 28% 48%;<br>
grid-column-gap: 3%;</p>
<div class="divGrid columns_c column-gap_b">
<div class="Elem">1</div>
...
<div class="Elem">6</div>
</div>
...
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ő: grid3.html