現在終於可以開始講 Grid 單元的事情了,雖然可以講的事情可能不多,絕大部分會圍繞在造成容器影響的地方,當然基本的東西還是會先帶一下。
只是說講完之後到底能不能滿 30 天呢 XD
--------------------------------------------------------------------------------
Grid 單元
首先,他跟 Flexbox 一樣,如果內容單元是包含在 Grid 容器裡面的話,他本身是宣告成 Grid 格式的文本(Grid formatting
context),他並不會因為你把他宣告成 Box Module 而轉換成你所知道的區塊元件(Block formatting context)
來到了 30 天的三分之一,然後我才剛講完網格容器而已,但是,剩下的東西也不多了,好像要寫滿 30 篇難度有點高。
只好多寫一點廢話了。
--------------------------------------------------------------------------------
間隔、間隔、間隔
> 當兵有呼過拐拐的應該知道我在講什麼。
這邊的 gap 其實跟 Flexbox 其實是同一套,而且特性也一樣。
> Gaps Between Boxes [https://www.w3.org/TR/css-align-3/#gaps]
CSS Box
你以為網格格線告一個段落後,我會開始講網格單元嗎?當然不是啊,我們網格容器都還沒講完呢。剩下一點小東西稍微交代一下就可以了。
放心雷沒有很多。
--------------------------------------------------------------------------------
容器中的隱性軌道設定
前一篇提到隱性格線,在容器中,也有兩個樣式設定是 專門 給隱性軌道使用的。
樣式預設值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),或者你會聽到有人稱他為