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