CSS Layout - 格線系統

格線是一組水平線和垂直線的交叉集合，分別定義 欄 與 列。

display

當元素的 display 設定為 grid 後，就變成了格線容器，該容器內的元素就成了格線項目。

display: grid

格線容器

grid-template-columns

在格線系統中，我們可以透過 grid-template-columns 來定義有多少個欄位及欄寬的設定為多少? 如下方的程式碼為例，Away 設定為三欄，欄寬分別為 100px、200px、30%。不用懷疑! 就是這麼直覺。雖然裡面有五個子層元素，但是多出來的兩個子層元素會自動換行，排到第二列中。

grid-template-columns: 100px 200px 30%;

採用 % 進行比例上的分配也是蠻直觀的方式。另外，用格線系統中專用的單位 fr 會更直覺。如下方程式碼:

grid-template-columns: 33.33% 66.66%;
grid-template-columns: 1fr 2fr;

TIP

如果對於單位認識還不夠，可以看這篇文章 單位表示法

差不多的內容再來一次，就當複習吧!

grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-columns: 1fr 1fr 1fr;

• repeat(): 指定重複 N 次格線設定。

  grid-template-columns: repeat(重複次數, 格線設定);

grid-template-rows

此屬性的操作方式與上述的 grid-template-columns 屬性相同，只是換成定義列數、列高的設定，再加上排版都以寬度較為重要，在此就不再贅述了。

格線空間

grid-template-areas 屬性用於定義格線區域的名稱，並透過這些名稱來對應格線項目。這樣可以讓格線的佈局更加直觀且易於維護。

多欄

1. 父層元素在 grid-template-areas 屬性定義兩個不同的名稱。例如: "a b c"。
2. 子層元素在 grid-area 屬性定義要對應的名稱。

若有資訊要換至不同欄位顯示的話，只要修改 grid-template-areas 的屬性值即可。

TIP

使用 grid-template-areas 可以讓複雜的佈局更具可讀性，特別是在需要頻繁調整區域位置時。

延伸

• 在 grid-template-areas 屬性中的屬性值，若包含了 . 表示不需要對應到格線系統。
• 若相鄰的格線名稱相同，畫面上的渲染會變成同一欄位。
• 建議設定 grid-template-columns 屬性，以確保欄位內容過多時，造成欄位寬度的變動。