CSS Grid帶來的新單位：分數單位fr
CSS Grid經過這麼多年的發展已經越來越受人青眯了，到目前為止支援率得到近88%的比例。經過這麼多年的跟蹤和學習，對CSS Grid的特性也是略有所知，但還未達到完全的融匯貫通。因為它有很多的特性，而且這些特性對於CSSer來說很多都是新的概念，比如我們今天要說的分數單位 fr 就是一個新東東。那麼這篇文章，咱們就來一起看看這個特性有什麼特性，給我們又能帶來什麼好處。感興趣的同學，請繼續往下閱讀。
簡介
在CSS Grid中可以使用任何長度單位來給網格軌道定義大小。比如在 grid-template-columns 或 grid-template-rows 可以使用 px 、 rem 、 vw 、 100% 等CSS單位來設定大小，除此之外，CSS網格還引入了另一個長度單位來幫助我們建立網格軌道大小。這個新單位就是我們今天要聊的 fr 單位。大家喜歡把它稱為 分數單位 。那麼他究竟有什麼作用呢？
在MDN是這樣描述的：
新的 fr 單位代表網格容器中可用空間的一等份。
就從這樣的描述或許還是會令人感到困惑。不用擔心，我們繼續往下閱讀，我想可以幫你解惑的。
對比性思考
fr 是代表網格容器中可用空間的一等份，即 1fr 。如果是 2fr 那麼就是把容器剩餘的空間分成兩等份。看到這裡，是否會想起Flexbox佈局中的 flex 呢？比如我們有這樣的一個示例：
<div class="flex">
<aside>Sidebar</aside>
<main>Main</main>
</div>
.flex {
width: 600px;
background: orange;
display: flex;
min-height: 50vh;
}
aside {
width: 200px;
background: #f36;
}
main {
margin-left: 20px;
background: #f63;
flex: 1;
}
效果如下：
可以看出， main 元素設定 flex:1 時也佔用了容器剩餘的空間（ 600px - 200px - 20px = 380px ）。從瀏覽器的檢視器中可以驗證，計算是無誤的：
在上面的示例中，我們再來變更一下，再新增一個側邊欄：
main {
flex: 2
}
aside:last-of-type {
flex: 1
}
使用瀏覽器再次驗證我們的計算是不是正確的：
上圖可以告訴我們答案，和我們最初想的是一樣的。Flexbox中的 fle