Jednotka fr

Jednotka pružnosti fr označuje podiel alebo frakciu z celkovej veľkosti priestoru, v ktorom sa prvok nachádza. Výhodou použitia fr je jeho adaptívnosť na rôzne kontajnery alebo rozlíšenia obrazovky, pretože fr jednoducho rozdelí celý priestor na uvedený počet frakcií (častí) bez viazanosti na ich presnú veľkosť v pixeloch.

Príklad

Pomocou vlastnosti grid-template-columns urobme tak, aby prvý a druhý stĺpec gridu zabrali jednu časť kontajnera, a tretí stĺpec - tri časti:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Príklad

Hodnoty uvedené v jednotkách fr môžu nadobúdať zlomkový tvar. Zmeňme predchádzajúci príklad, uvedením pre druhý a tretí stĺpec šírku v zlomkových číslach:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 0.5fr 2.5fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Pozri tiež

jednotka px,
ktorá nastavuje veľkosť v pixeloch
jednotka em,
ktorá nastavuje veľkosť v em
jednotka rem,
ktorá nastavuje veľkosť v rem
jednotka %,
ktorá nastavuje veľkosť v percentách
jednotka vw,
ktorá nastavuje veľkosť v vw
jednotka vh,
ktorá nastavuje veľkosť v vh
jednotka vmax,
ktorá nastavuje veľkosť v vmax
jednotka vmin,
ktorá nastavuje veľkosť v vmin