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

Oszlopok száma és szélessége



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


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