CSS 格線系統 grid：二維排版與軌道定義

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

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 屬性，以確保欄位內容過多時，造成欄位寬度的變動。

自動響應的欄數

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

每欄最小 240px、最多平分剩餘空間，瀏覽器會依容器寬度自行決定欄數，很多時候連 媒體查詢 都不必寫。

跨欄與跨列

.feature {
  grid-column: span 2;   /* 橫跨兩欄 */
  grid-row: 1 / 3;       /* 從第 1 條線到第 3 條線 */
}

常見問題

fr 是什麼單位？

它代表剩餘空間的一份。兩欄各給 1fr 就是平分，1fr 2fr 則是三分之一與三分之二。它只在格線容器中有效，詳見 單位表示法。

怎麼做出會自動換欄的版面？

用 repeat 搭配 auto-fit 與 minmax，指定每欄的最小寬度與上限，瀏覽器就會依容器寬度自動決定欄數。

auto-fit 和 auto-fill 差在哪？

空間有剩時，auto-fit 會把多餘的空軌道收合，讓現有項目撐滿；auto-fill 則保留空軌道，項目維持原本寬度。

grid 和 flex 可以一起用嗎？

可以，而且很常見。外層用 grid 切出版面骨架，格子內部再用 flex 對齊內容，各自做擅長的事。

延伸閱讀

彈性盒子 flex排版方式比較單位表示法媒體查詢