A grid-template-columns tulajdonság segítségével adhatjuk meg a használni kívánt oszlopok szélességét.
Annyi méretet kell felsorolni egymás mellett, ahány oszlopot szeretnénk használni.
Oszlopok létrehozása, szélességük beállítása:
kijelölő
{
grid-template-columns
:
méret
,
...
,
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;
border:1px solid #066;
background-color:#fff;
text-align:center;
}
.divBlock {
display: block;
}
.divGrid {
display: grid;
}
.grid-template-columns_a {
grid-template-columns: auto auto auto;
}
.grid-template-columns_b {
grid-template-columns: 50px 100px 150px;
}
.grid-template-columns_c {
grid-template-columns: 20% 30% 50%;
}
</style>
</head>
<body>
<h2>grid-template-columns: auto auto auto;</h2>
<div class="divGrid grid-template-columns_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>
<h2>grid-template-columns: 50px 100px 150px;</h2>
<div class="divGrid grid-template-columns_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>
<h2>grid-template-columns: 20% 30% 50%;</h2>
<div class="divGrid grid-template-columns_c">
<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>
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ő: grid2.html