Rugalmas oszlopszélesség

Ha vegyesen használunk abszolút és relatív méreteket könnyen előfordulhat, hogy az egyes sorok túlnyúlnak a rendelkezésre álltó területen.

A túlnyúlás elkerülhető, ha magunk számoljuk ki a rendelkezésre álló területet a calc() függvény segítségével, de így sok munkával egy áttekinthetetlen kódot kapunk.

Egy Grid konténeren belül használhatjuk a fraction-t (fr), amelynek értékét a böngésző számolja ki számunkra a rendelkezésre álló terület, a beállított margók és szegélyek figyelembevételével. Így könnyen elkerülhetjük a túlnyúlást.

A példában szereplő kód (grid-template-columns: 1fr 2fr 3fr;) alapján a böngésző a rendelkezésre álló területet összesen 6 egyenlő részre osztja. Így határozza meg az 1fr-hez tartozó szélességet. Az első oszlopunk szélessége ennek egyszerese (1fr), a másodiké kétszerese (2fr) és a harmadiké háromszorosa (1fr) lesz.

1. Példa:

Forráskód


 

<head> 
...	
<style>
...
			.Elem {
				padding: 5px 0px;
				border:1px solid #066;
				background-color:#fff;
				text-align:center;
			}		
			.divGrid {
				padding: 10px 0px;
				display: grid;		
			}	
			.columns_a {
				grid-template-columns: 1fr 2fr 3fr;
			}
			.columns_b {
				grid-template-columns: 20% 30% 50%;
			}
			.columns_c {
				grid-template-columns: 
				calc(20% - 8px)
				calc(30% - 8px)
				calc(50% - 8px);
			}		
			.column-gap_a {
				grid-column-gap: 12px;
			}											
		</style>
	</head>
	<body> 
		<p>grid-template-columns: 1fr 2fr 3fr;<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">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_c column-gap_a">
		  <div class="Elem">1</div>
		  <div class="Elem">2</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ő: grid4.html