初學者指南：CSS Grid 的 grid-auto-flow 屬性

更新日期： 2024 年 11 月 5 日

在 CSS Grid 中，grid-auto-flow 屬性是用來控制網格項目的自動排列方式。

這個屬性對於那些不明確指定位置的網格項目尤其有用，能決定它們在網格中的排列順序和填充方式。

掌握 grid-auto-flow 屬性，能夠幫助您在動態佈局中，更靈活地控制項目的顯示方式。

本文將介紹 grid-auto-flow 的概念和用法，讓新手更好地理解這個屬性。

什麼是 grid-auto-flow？

grid-auto-flow 是一個決定自動布局方式的屬性，當您在網格中放置元素時，如果沒有指定某些項目的確切位置，CSS Grid 就會自動按照指定的 grid-auto-flow 排列方式來進行填充。

簡單來說，這個屬性可以控制這些項目是按行排列還是按列排列，以及是否自動填滿網格中的空隙。

基本語法

grid-auto-flow: row | column | dense | row dense | column dense;

常見取值

• row（預設值）：按行填充網格項目，逐行排列，當一行滿時，會自動換到下一行繼續排列。
• column：按列填充網格項目，逐列排列，當一列滿時，會自動換到下一列繼續排列。
• dense：啟用「密集填充」，自動填補空隙（詳細見下文）。
• row dense：按行排列並啟用密集填充。
• column dense：按列排列並啟用密集填充。

grid-auto-flow 的基礎應用

grid-auto-flow: row（按行填充）

這是 grid-auto-flow 的預設值，當網格容器沒有明確指定項目的位置時，項目將按照行排列，逐行填充。

範例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
}

在這段代碼中，未指定位置的項目會按行填充：第一行放滿三個項目後，自動換到下一行繼續排列。

grid-auto-flow: column（按列填充）

當使用 grid-auto-flow: column; 時，項目將會逐列填充，意味著它會先填滿第一列，再換到下一列。

範例：

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-auto-flow: column;
}

在這段代碼中，項目會逐列填充：第一列放滿三個項目後，自動換到下一列，這樣會讓項目先縱向排列。

密集填充（dense）

dense 是一個附加屬性，可以與 row 或 column 一起使用（例如 row dense 或 column dense）。

dense 的作用是自動填補網格中的空隙，如果前面有空格且後面的項目可以填入該空隙，則 CSS Grid 會將這些項目「往前擠」，有效利用空間。

grid-auto-flow: row dense（按行排列並啟用密集填充）

使用 row dense 時，會先按行填充，並且啟用密集模式。如果前面的網格單元中有空位，後面的項目會自動填補這些空隙。

範例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
}

如果網格項目中有一些指定了位置而造成空隙，row dense 模式下會自動將後面的項目填補到這些空位中。

grid-auto-flow: column dense（按列排列並啟用密集填充）

與 row dense 類似，column dense 會先按列填充，並啟用密集模式來填補空隙。這樣在縱向排列的同時，也會盡可能地利用空間。

範例：

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-auto-flow: column dense;
}

在這段代碼中，未指定位置的項目會按列排列，並且啟用密集填充模式來確保空間被充分利用。

grid-auto-flow 的實際應用範例

綜合範例

以下是一個包含多種設定的範例，展示了 grid-auto-flow 的靈活應用：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  grid-auto-flow: row dense;
  gap: 10px;
}

.item1 {
  grid-column: span 2;
}

.item2 {
  grid-row: span 2;
}

在這段代碼中：

• 容器設置了兩行三列的網格布局。
• grid-auto-flow: row dense; 表示項目會按行填充，並啟用密集模式來填補空隙。
• item1 會佔用兩個欄寬度，item2 會佔用兩行的高度。
• 當 item1 或 item2 佔據了多個網格單元而形成空隙時，dense 模式會自動將後面的項目移動到這些空隙位置。

這樣的設置非常適合用於不規則排列的圖片庫或卡片布局，能有效利用空間並讓畫面更為整齊。

結語

grid-auto-flow 是 CSS Grid 中非常實用的屬性，特別是在處理自動排列和密集填充時。

透過 row、column 和 dense 等模式，我們可以靈活地控制網格項目的排列方式，以更好地適應不同的布局需求。

學會使用 grid-auto-flow，將幫助您設計出更加動態且靈活的網格布局。