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

本文譯自：An Introduction to the fr CSS unit。首發知乎專欄「前端外刊評論」，介紹了 CSS Grid 規範中引入的一個新的長度單位 fr，咱們一塊兒來看看究竟是怎麼回事吧，譯文走起！

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

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

<div class="grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>複製代碼

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

codepen.io

在 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);複製代碼

可能你還沒發現，目前咱們的 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)) 這樣能夠工做！

一不當心咱們搞出了滾動條：

codepen.io

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

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

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

codepen.io

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

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

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

欄的寬度 = (viewport 的寬度 - nav 的寬度) /  欄的數量  * 100%複製代碼

是，這沒問題，可是很醜很痛有沒有？一旦咱們更改 nav 的寬度，須要再作一遍數學題。因此啊， fr 這個單位完美處理這個問題，代碼可讀性很強有沒有？

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

codepen.io

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

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

歡迎微博知乎搜索「前端外刊評論」微信搜索 FrontendMagazine 關注外刊君。