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