Enota fr

Enota prožnosti fr predstavlja delež ali frakcijo skupne velikosti prostora, v katerem se element nahaja. Prednost uporabe fr je njegova prilagodljivost različnim vsebnikom ali ločljivostim zaslona, saj fr preprosto porazdeli ves razpoložljivi prostor na navedeno število frakcij (delov) brez vezave na njihovo natančno velikost v slikovnih pikah.

Primer

Z lastnostjo grid-template-columns naredimo tako, da bosta prvi in drugi stolpec mreže zasedla en del vsebnika, tretji stolpec pa tri dele:

<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;
}

Primer

Vrednosti, podane v enotah fr, lahko zavzamejo tudi ulomke. Spremenimo prejšnji primer tako, da podamo za drugi in tretji stolpec širino v ulomkih:

<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;
}

Glejte tudi

enota px,
ki določa velikost v slikovnih pikah
enota em,
ki določa velikost v em
enota rem,
ki določa velikost v rem
enota %,
ki določa velikost v odstotkih
enota vw,
ki določa velikost v vw
enota vh,
ki določa velikost v vh
enota vmax,
ki določa velikost v vmax
enota vmin,
ki določa velikost v vmin