Hina Chen

你以為網格格線告一個段落後，我會開始講網格單元嗎？當然不是啊，我們網格容器都還沒講完呢。剩下一點小東西稍微交代一下就可以了。 放心雷沒有很多。 -------------------------------------------------------------------------------- 容器中的隱性軌道設定 前一篇提到隱性格線，在容器中，也有兩個樣式設定是 專門 給隱性軌道使用的。 樣式預設值grid-auto-rowsautogrid-auto-columnsauto由於兩個設定的可使用數值都一樣，我直接拿出來外面講比較快， * 相對尺寸 % * fr * min-content * max-content * auto * minmax() * fit-content() 以上這幾種都是給隱性軌道使用，我快速舉個例子， .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr;

> 我先問一個問題，如果我有一個 3x3 的 Excel 方塊，請問我有幾條格線？ Grid 容器中的格線是整個排版定位中的靈魂，但，他沒有 Excel 那麼單純。 -------------------------------------------------------------------------------- 網格格線 Grid 容器的靈魂就是網格格線，我們在宣告一個 Grid 容器的時候，每個方塊就會產生相對應的格線，而這些格線當中還會有先前提及的隱性格線（implicit grid）的設計。 我們從 Grid 容器先看起，首先我們定義一個 3x3 的 Grid 容器，

我們繼續來深入關於 Grid 容器的相關樣式設定。雖然目前 CSS 框架在多數情況下並不需要特別在意，但，就老話一句，誰在意誰痛苦。 > 踩到雷而且你還不知道為什麼 -------------------------------------------------------------------------------- 新的單位 fr 從 Grid 出現之後，我們有一個新的尺寸單位可以使用，他叫做彈性長度（flexible length），在 CSS 當中，因應這個彈性長度，所以就有了新單位 fr，而 fr 的全名為 彈性軌道（flexible tracks），或者你會聽到有人稱他為

> 你如果會用 Excel，那 Grid 就應該不陌生。 不過老實講，我也不太會用 Excel。 Grid Layout Module 其實他已經 CR 好一陣子了，目前多數主流的 CSS 框架已經開始採用。所以並不是你不會用或是沒有使用到這個東西，而是你已經在用了，但是你不知道他背後是使用 Grid Layout 而已。 caniuse grid layout Level 1Grid 的基本結構就跟我剛剛提到的 Excel 很像，他是一個矩形區塊，包含了欄與列的設定。