iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

CSS Flex/Grid Layout Modules系列 第 14

[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 單元,其對齊權重由高到低就是,

  1. position: absolute ,並指定邊界。
  2. justify-self, align-self 覆蓋。
  3. margin 使用 auto 關鍵字。
  4. 容器的 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 並不會改變。

https://ithelp.ithome.com.tw/upload/images/20210918/20001433NCBCkGmLlo.png


小記

先預祝大家中秋佳節快樂~在 Grid 單元該叮嚀的部分今天就算告一段落了。明天會開始講一些格線系統中擅長與不擅長的部分,順便抓一些時下流行的 CSS 框架出來討論。


目錄與小節:
[CSS] Flex/Grid Layout Modules, part 1


部落格同步放送:
[CSS] Flex/Grid Layout Modules, part 14


上一篇
[CSS] Flex/Grid Layout Modules, part 13
系列文
CSS Flex/Grid Layout Modules14

尚未有邦友留言

立即登入留言