Hina Chen

單元對齊跟留白的部分今天會繼續，定位的問題基本上不出亂子的話就如同昨天說明的。當然，如果再加上對齊跟留白，如果不小心也是會爆炸的。 對於留白問題，我一律設定為 0（欸不是。 -------------------------------------------------------------------------------- 填滿（stretch）與留白（margin） 我們現在已經會操作單元軌道來 框住 我們的 Grid 單元了，那麼，那些基本的單元對齊的部分應該使用上就不會有太大的問題。 > 如果忘記的請自行複習 [https://blog.hinablue.me/css-flex-grid-layout-modules-part-11/] 但是呢，由於軌道邊界設定的關係，所以 Grid 容器指定的對齊、Grid

今天繼續來講 Grid 單元，昨天提到了對齊基本用法，今天繼續來講對齊與留白。不過一開始，還是先解釋清楚關於格線與單元之間的事情。 總覺得 15 天就會結束了說（笑）。 -------------------------------------------------------------------------------- 單元與格線 Grid 容器提供了格線系統，然後每個格線將內容區塊化（blockification）後，產生了 Grid 單元。這是整個 Grid Layout 的運作方式。那麼，對於 Grid 單元來說，格線系統就類似一種邊界，可以指定 Grid 單元在哪些軌道上。

現在終於可以開始講 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;