[CSS] Flex/Grid Layout Modules, part 14

中秋連假寫稿好像有點不太應景，所以今天不會講太多東西，最後把 Grid 單元的對齊稍微補一下，連假嘛，大家輕鬆一點。

不過武漢肺炎肆虐，大家還是小心為上。

單元的對齊

如同前些日子提及的，其實就只有兩種，第三種是縮寫不太想把他算進來。資料的部分就不再次貼過來，忘記的人請參考之前的文章，這邊簡單說明一下，

樣式	說明
`justify-self`	行內或主要軸方向的對齊，以 LTR 來說就是欄（column）方向對齊
`align-self`	區塊或交叉軸方向對齊，以 Top-to-Bottom 就是列（row）方向對齊
`place-self`	上面兩個樣式的縮寫

就如同昨天提到的，這個裡所謂的對齊其實主要的基準點就是格線軌道，所以，Grid 單元所謂的 as parent 有的時候是格線區域，並不是 Grid 容器。就以 normal 個關鍵字來說，他在不同的情況下，並不會全然的跟 auto 有相同的反應。

等等，你不是說不知道嗎？

我這麼說你就信了？

這種東西太冷門，我想會遇到的機會可能也不是很高。在軌道區域單元當中 normal 會相當於 stretch，在 CSS 對齊模組當中，這個字在每一種系統中所呈現的結果都略有不同，講起來其實很搥心肝，所以跟格線系統沒啥太大關係就不贅述了。

總之，normal 在格線系統的單元中，等同於 stretch，只需要記得這件事情就好了。

對齊的權重順序

在講這些對齊屬性之前，請先記得不要用 stretch 也不要亂用 margin，不然這些對齊的事情就是不會像是你想的那樣，也就是 邏輯上他對齊了，但是實際上看起來沒有。

對齊的部分基本上跟 Flexbox 所使用的方式雷同，只是 Flexbox 有 flex-* 開頭的設定值，而 Grid 的部分是無法使用的。但，基本上能通用該通用的部分都通用了。

這也是為什麼講到對齊就一直提到 CSS Box Alignment Module 的原因。

基本上，Grid 單元除了會受到 Grid 容器的對齊設定影響之外，自己本身的覆寫狀態也是決定對齊最終結果的一環。

Grid 容器	Grid 單元	最終結果
`justify-items`	`justify-self`	依照 `justify-self` 覆寫
`align-items`	`align-self`	依照 `align-self` 覆寫

講是這樣講，還記得我們一開始有提過 Grid 單元軌道區域容器嗎？

忘記的請這裡複習
[CSS] Flex/Grid Layout Modules, part 7

當你的 Grid 單元使用了 position: absolute，且指定了上、右、下、左任何一個邊界，只要符合軌道區域容器的條件，那麼，任何對齊的設定都會被忽略，換句話說，一切都以 position: absolute 為主。

所以，在格線軌道區域內的 Grid 單元，其對齊權重由高到低就是，

position: absolute ，並指定邊界。
justify-self, align-self 覆蓋。
margin 使用 auto 關鍵字。
容器的 justify-items, align-items 設定。

所以，這就有點像是 position: absolute 會跳脫 Flexbox 的元件流一樣，只不過在 Grid 生態系裡面，由於可以定義軌道區域，所以那個區域就變成了一種 隱形的區塊，在那裡面的絕對定位就相對於區塊內發生而已。

至於已經使用了格線系統，為何還要使用絕對定位？

事事沒有絕對，除了數學！

數學不會就是不會！

超出格線

沒問題，超出格線的 Grid 單元基本上一樣可以對齊，但是，如果搭配了 safe 關鍵字的話，那麼結果可能會跟你想像的不太一樣。如果忘記了什麼是 safe 請自行回去複習。

沒錯，在 Grid 單元當中也是有 safe 可以使用，舉例來說，

.grid-container {
    grid-template-columns: repeat(7, 100px);
}

.grid-item {
    grid-column: 1 / 5;
    
    justify-self: end;
    
    width: 1000px;
}

這麼做的話，由於 Grid 單元容器總共使用了 5 個軌道，所以基本上他的寬度會是 500px，這個時候偏偏 Grid 單元定義了 1000px 的寬度。所以根據 justify-self: end 的定義，他會對齊最後一個軌道，然後整個單元內容會超出容器。

如果在這邊使用了 safe，即 justify-self: safe end 這樣的設定，那麼由於容器超出，會觸發 safe 的機制，所以他就會被換成 start 的結果，但是，你所使用的容器寬度，依舊會是 1000px 並不會改變。