在 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，將幫助您設計出更加動態且靈活的網格布局。