fr是css一個比較新潮的單位，在Grid布局中常見到它的身影。

這里回答了兩個問題：

fr是什么？能幫助解決什么問題？

fr有趣的實踐情況——和其他單位混合使用

fr是什么？能幫助解決什么問題？

這里有一段簡單grid布局demo：

<div class="grid"><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div> </div> 復(fù)制代碼/*主要css樣式*/ .grid {display: grid;grid-template-columns: repeat(4, 25%);grid-column-gap: 10px; } 復(fù)制代碼

細心的朋友會發(fā)現(xiàn)在設(shè)置grid-template-columns: repeat(4,25%)和grid-column-gap:10px之后，頁面的底部是會有水平方向滾動條的。因為在算每列寬度的時候沒有將間隔給剔除。

fr正是被用于優(yōu)雅地解決這樣的問題，而不用自己手動calc(..)去計算：

/*css修改代碼*/ .grid {display: grid;grid-template-columns: repeat(4, 1fr);grid-column-gap: 10px; } 復(fù)制代碼

fr有趣的實踐情況——和其他單位混合使用

比如要實現(xiàn)這樣的布局：左側(cè)是固定寬度的導(dǎo)航條，右側(cè)所有列均勻瓜分剩余空間

.grid {display: grid;grid-template-columns: 250px repeat(12, 1fr); /*注意這里和px的混合使用*/grid-column-gap: 10px; } 復(fù)制代碼

小結(jié)

fr是在看Grid布局中遇到的陌生的css單位值，平時用的也比較少。學習了css tricks上的An Introduction to the fr CSS unit ，講得挺通俗易懂。css也在朝著一個“智能”的方向，挺博大精深的。也強烈推薦css tricks，網(wǎng)頁設(shè)計風格很喜歡，介紹也很仔細。

轉(zhuǎn)載于:https://juejin.im/post/5c7552b0e51d457fcb40b64f

總結(jié)

以上是生活随笔為你收集整理的你知道css单位fr吗？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。