Enheten fr
Flexibilitetsenheten fr
betecknar en andel eller fraktion av den totala
storleken på utrymmet där elementet finns.
Fördelen med att använda
fr är dess anpassningsförmåga till
olika behållare eller skärmupplösningar,
eftersom fr helt enkelt fördelar allt utrymme på det angivna
antalet fraktioner (delar) utan koppling till deras exakta
storlek i pixlar.
Exempel
Låt oss med egenskapen
grid-template-columns
göra så att den första och andra
kolumnen i gridden tar en del av behållaren,
och den tredje kolumnen - tre delar:
<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;
}
:
Exempel
Värden angivna i enheten fr
kan ta bråkform. Låt oss
ändra föregående exempel genom att ange
bredden för den andra och tredje kolumnen
i bråktal:
<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;
}
:
