![[CSS] Flex/Grid Layout Modules, part 15](/content/images/2022/01/grid-sample-73-1.png)
燙傷了手停了幾天，不過差不多 15 天好像就交代完所有的東西了。剩下的大部分是比較冷門，甚至是 Grid Layout Module Level 2 的事情，雖然支援度還有待商榷，不過還是多少可以講一點。 手是好了點，倒不用太擔心。 Grid 能與不能 如果很有耐心的看到這裡，我就假設大家都已經知道 Grid Layout Module 的基本操作方式。那麼，我們就可以來看看 Grid 到底在哪些情況下，能做到哪些事情，不能做到哪些事情。 首先，可以做得到的地方很多，我們就單討論
![[CSS] Flex/Grid Layout Modules, part 14](/content/images/2021/09/grid-sample-70-1.png)
中秋連假寫稿好像有點不太應景，所以今天不會講太多東西，最後把 Grid 單元的對齊稍微補一下，連假嘛，大家輕鬆一點。 不過武漢肺炎肆虐，大家還是小心為上。 單元的對齊 如同前些日子提及的，其實就只有兩種，第三種是縮寫不太想把他算進來。資料的部分就不再次貼過來，忘記的人請參考 之前的文章，這邊簡單說明一下， 樣式 說明 justify-self 行內或主要軸方向的對齊，以 LTR 來說就是欄（column）方向對齊 align-self 區塊或交叉軸方向對齊，以 Top-to-Bottom 就是列（row）方向對齊
![[CSS] Flex/Grid Layout Modules, part 13](/content/images/2021/09/grid-sample-57-1.png)
單元對齊跟留白的部分今天會繼續，定位的問題基本上不出亂子的話就如同昨天說明的。當然，如果再加上對齊跟留白，如果不小心也是會爆炸的。 對於留白問題，我一律設定為 0（欸不是。 填滿（stretch）與留白（margin） 我們現在已經會操作單元軌道來 框住 我們的 Grid 單元了，那麼，那些基本的單元對齊的部分應該使用上就不會有太大的問題。 如果忘記的請自行複習 但是呢，由於軌道邊界設定的關係，所以 Grid 容器指定的對齊、Grid 單元自行指定的對齊，跟 margin 與 stretch 之間就會有不少互相影響的部分。
![[CSS] Flex/Grid Layout Modules, part 12](/content/images/2021/09/grid-sample-47-2.png)
今天繼續來講 Grid 單元，昨天提到了對齊基本用法，今天繼續來講對齊與留白。不過一開始，還是先解釋清楚關於格線與單元之間的事情。 總覺得 15 天就會結束了說（笑）。 單元與格線 Grid 容器提供了格線系統，然後每個格線將內容區塊化（blockification）後，產生了 Grid 單元。這是整個 Grid Layout 的運作方式。那麼，對於 Grid 單元來說，格線系統就類似一種邊界，可以指定 Grid 單元在哪些軌道上。 基本的樣式為，
![[CSS] Flex/Grid Layout Modules, part 11](/content/images/2021/09/grid-sample-41-1.png)
現在終於可以開始講 Grid 單元的事情了，雖然可以講的事情可能不多，絕大部分會圍繞在造成容器影響的地方，當然基本的東西還是會先帶一下。 只是說講完之後到底能不能滿 30 天呢 XD Grid 單元 首先，他跟 Flexbox 一樣，如果內容單元是包含在 Grid 容器裡面的話，他本身是宣告成 Grid 格式的文本（Grid formatting context），他並不會因為你把他宣告成 Box Module 而轉換成你所知道的區塊元件（Block formatting context），在
![[CSS] Flex/Grid Layout Modules, part 10](/content/images/2021/09/grid-sample-34-2.png)
來到了 30 天的三分之一，然後我才剛講完網格容器而已，但是，剩下的東西也不多了，好像要寫滿 30 篇難度有點高。 只好多寫一點廢話了。 間隔、間隔、間隔 當兵有呼過拐拐的應該知道我在講什麼。 這邊的 gap 其實跟 Flexbox 其實是同一套，而且特性也一樣。 Gaps Between Boxes CSS Box Alignment Module Level 3 不要問我為什麼大家都跟 Box Alignment Module