CSS 新的長度單位 fr 你知道么？

本文譯自：An Introduction to the fr CSS unit。介紹了 CSS Grid 規範中引入的一個新的長度單位 fr，我們一起來看看到底是怎麼回事吧，譯文走起！

關於 CSS Grid 的激烈討論到處都是，但我發現很少有討論 fr 這個新的 CSS 長度單位（規範在這裡）的文章。

為了講清楚，先從一個典型的案例開始，我們看下面的例子，用 CSS 創建一個網格，這個網格一行四列，每列等寬。

<div class="grid">n <div class="column"></div>n <div class="column"></div>n <div class="column"></div>n <div class="column"></div>n</div>n

.grid {n display: grid;n grid-template-columns: repeat(4, 25%);n grid-column-gap: 10px;n}n

https://codepen.io/robinrendle/pen/e91a4b0e65df250f678738cc4d614d94

在 grid-template-columns 里我們使用了 repeat()，如果你已經知道了 repeat() 的功能可以跳過本段。它是 CSS Grid 引入的最有愛的特性之一！它是一種縮寫方式，本質就是為了減少我們重複書寫多個值的問題。本來我們可以直接寫 grid-template-columns: 25% 25% 25% 25%;，但用 repeat() 看上去更清晰明了，尤其是有很多冗長的寬度表示時（比如 minmax() 表達式）。

repeat 的語法如下：

repeat(number of columns/rows, the column width we want);n

可能你還沒發現，目前我們的 CSS 代碼是有點問題的。

首先，為了使用這個可愛的函數，我們必須做數學題。必須計算一下分成4欄每欄的寬度是百分之多少，不錯，這裡是 25%。這道題目還算簡單，但是如果複雜點我們就需要讓瀏覽器幫我們做。還好我們有 calc() 函數，於是我們的答案可以是 repeat(4, calc(100%/4))，看起來有點複雜呵……不過還有另外一個致命問題：

這個問題就是元素溢出了。4 個 25% 寬的欄加上 10px 的 grid-column-gap 超過了 100%。百分比的工作模式沒有問題，但顯然結果不是我們想要的。我們希望代碼表達的是：每欄的寬度是總寬度的（viewport 的寬度）25%，欄與欄之間的有 10px 的間距。差別很微妙，布局就很尷尬了。

外刊君：repeat(4, calc((100% - 10px * 3)/ 4)) 這樣可以工作！

一不小心我們搞出了滾動條：

http://codepen.io

這個時候 fr 就持證上崗服務我們了。

在定義網格時，fr 的用法與其他 CSS 長度單位 %、px、em 等是一樣的。用這個神奇的新單位重寫一下代碼：

.grid {n display: grid;n grid-template-columns: repeat(4, 1fr);n grid-column-gap: 10px;n}n

https://codepen.io/robinrendle/pen/41db9c060e0d1e7257f2ed8bd4883608

demo 看起來沒啥變化，四欄等寬（就是 1/4 或者是 25%）。但是，注意！橫向的 overflow 消失了。每個欄的寬度設置為 1fr 後，三個 10px 的間隙首先從總寬度減去，再計算每個欄的寬度！

你可能會bibi說為啥我非要用這個新的 CSS 單位，我繼續堅持使用百分比或者 px 有什麼不好？好吧，我們再看一個更複雜的例子，顯然 fr 是更好的方案。在下面這個例子中，最左邊一個有一個導航欄，然後右緊跟著12個 column：

這種「切圖」需求很常見啊，如果不使用 fr，我們只能選擇使用額外的 grid 或者 calc 來實現。必須像下面這樣思考：

欄的寬度 = (viewport 的寬度 - nav 的寬度) / 欄的數量 * 100%n

是，這沒問題，但是很醜很痛有沒有？一旦我們更改 nav 的寬度，需要再做一遍數學題。所以啊， fr 這個單位完美處理這個問題，代碼可讀性很強有沒有？

.grid {n display: grid;n grid-template-columns: 250px repeat(12, 1fr);n grid-column-gap: 10px;n}n

https://codepen.io/robinrendle/pen/976a1ccd8d872248cb3521b21695a3ae

我們的方案就是給第1欄設置一個固定寬度，然後重複創建12個欄「平分剩下的自由空間」（從規範的標準解釋是這樣）。不需要做任何的數學題！易讀，最左邊的 nav 可以隨意更改，剩下的20個欄會自動伸縮。

好了，一點點不動腦的工作讓我們的界面更容易維護了。就算將來的某個時候再來看代碼也很清晰，說簡單點，就算辭職了，後來的「切圖仔」也不用跳坑！