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