這篇不算教學,只是將 CSS Grid 的語法做個紀錄,所以沒有前言,也不會介紹 CSS Grid 是什麼。如果你已經知道 CSS Grid 的作用,也歡迎參考以下筆記,也許可以幫助你更了解相關語法。
從 Gird 開始
前置作業:將 div 的 display
設為 grid
,接著定義 Grid 的寬度(columns)與間距(gap)
☞ grid-column-gap
以及 grid-row-gap
可以合併為 grid-gap
:
▼ 網頁示意圖

假使要設定 CSS Grid 的高度,可以再加上:
▼ 網頁示意圖

在這個範例中,row 有 4 行,可是我們只設定了 1 & 2 行,沒有設定高度的會以元素高度為高度(auto-height)。
☞ 可以用grid-auto-rows
設定 auto-height 的最小高度。
☞ 注意
- 沒有
grid-auto-columns
這種語法。 - 沒有
grid-auto
這種簡寫。
新的單位:fr
fr
是因應 CSS Grid 而產生的新單位,全名是 fraction (分數),這個分數不是 score 那個分數,而是數學分子 + 分母的那個分數。
我們可以用 fr
去設定 CSS Grid 的相對寬度,以達到 RWD 的縮放效果。如果是跟前面範例一樣使用px
,縮放的時候是不會有 RWD 的(這大家應該都很清楚了)
將 grid-template-columns
的單位改掉:
- 編號 1,4,7,10:占 1/4
- 編號 2,5,8:占 2/4
- 編號 3,6,9:占 1/4
▼ 網頁示意圖

這時候縮放就會有 RWD 效果囉~。
另外也可以混搭單位:
重覆 Grid 的設定
如果 Grid 的寬度有一個固定的模式,可以用 repeat()
這個語法把它們合併,類似迴圈的感覺。
假設原本這樣寫:
可以看出來三個為一組,1fr 2fr 2fr
是一直重覆的,所以改寫如下:
▼ 網頁示意圖

最左邊跟最右邊的 Grid 如果不會重覆,可以接在repeat
的前後:
Grid 的排序
使用 grid-auto-flow
進行 Grid 的排序,預設屬性為 row
(橫向排列)。
如果改用 column
,Grid 就會變成縱向排列 (可以注意數字編號):
▼ 網頁示意圖

此外也可以指定某一個div
進行排序
如果沒有指定order
的順序,預設就是order: 0
,而我們現在指定第三個 div 為order: 1
,所以第三個 div 的排序會跑到最後面。
☞ 承上,現在是縱向排列,所以 div 排列的順序是用「縱向」來看的喔。
▼ 網頁示意圖

接下來就可以用order:N
任意調整排序囉!
▼ 網頁示意圖

以上就是 Grid 的相關筆記。
部落格改版之後,是用 Grid + Flexbox 來排版的,有興趣的朋友可以自行扒皮 XD