A fr mértékegység
A fr rugalmassági egység
egy töredéket vagy részt jelöl a teljes
terület méretéből, amelyben az elem található.
A fr használatának előnye
a különböző konténerekhez vagy képernyőfelbontásokhoz
való alkalmazkodóképessége,
mivel a fr egyszerűen elosztja a teljes teret a megadott
töredékek (részek) száma szerint anélkül, hogy a pontos
pixelméretükhöz kötődne.
Példa
Állítsuk be a
grid-template-columns
tulajdonsággal úgy,
hogy a rács első és második
oszlopa a tartalom egy részét foglalja el,
a harmadik oszlop pedig három részt:
<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;
}
:
Példa
A fr egységben megadott értékek
tört formájúak is lehetnek. Módosítsuk
az előző példát úgy, hogy a
második és harmadik oszlop szélességét
törtszámokban adjuk meg:
<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;
}
:
Lásd még
-
a
pxmértékegység,
amely pixelekben adja meg a méretet -
a
emmértékegység,
amely em-ben adja meg a méretet -
a
remmértékegység,
amely rem-ben adja meg a méretet -
a
%mértékegység,
amely százalékban adja meg a méretet -
a
vwmértékegység,
amely vw-ben adja meg a méretet -
a
vhmértékegység,
amely vh-ban adja meg a méretet -
a
vmaxmértékegység,
amely vmax-ban adja meg a méretet -
a
vminmértékegység,
amely vmin-ben adja meg a méretet