Grid 網格流向與間距
除了基本的網格格線或網格空間名稱，Grid 網格容器也有一些專門控制細節的樣式屬性，例如 grid-auto-flow 控制網格流向，grid-gap、grid-row-gap 和 grid-column-gap 控制間距，grid-auto-columns 和grid-auto-rows 自動格線，這篇教學會介紹這些樣式屬性的用法。
延伸閱讀：Grid 網格容器與格線、Grid 網格空間與命名、Grid 排列網格項目、Grid 網格項目對齊、順序與對齊
快速導覽：
grid-auto-flow 網格流向
grid-auto-flow 表示「網格項目的流向」，沒有繼承特性，有 row 和 column 兩種屬性值，row 是預設值，表示網格項目會「先填滿列，在換行到另外一列」( 水平先填滿 )，column 表示網格項目會「先填滿欄，在換行到另外一欄」( 垂直先填滿 )，下方範例會展示兩種不同的流向。
<!-- HTML 程式碼-->
<div class="g g1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
<div class="g g2"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
<!-- CSS 程式碼 -->
<style>
.g {
width: 240px;
height: 240px;
outline: 1px solid #000;
margin: 10px;
float: left;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.g1 {grid-auto-flow: row;}
.g2 {grid-auto-flow: column;}
.g div {outline: 1px dashed #000;}
</style>
除了單純使用 row 和 column 屬性值，也可以額外加上「dense」的設定，讓屬性值變成「row dense」或「column dense」，加上 dense 之後，網格元素在排列時，會讓後方大小適合的項目，自動往上填補「額外空間」，例如網格一列有三欄，第一個項目佔了兩欄，如果第二個項目也是兩欄，就會換行到第二列，發生「空出一欄」的狀況，如果加上 dense，就會讓第二個以後只佔一欄的元素補滿空的這一欄。
下方的範例使用兩組網格，左方是預設值「row」，右方使用「row dense」，當網格項目大小不一時，預設流向就會出現「空格」，但如果加上了「dense」，就會讓大小適合的後方項目往上填補空格。
注意，範例中將網格項目的起始格線使用預設值「
auto」才能一個接著一個，並搭配「span」延伸範圍，如果有指定起始格線，等同指定「絕對位置」，dense就會失去作用。
<!-- HTML 程式碼-->
<div class="g g1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g2"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g1 a"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
<div class="g g2 a"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
<!-- CSS 程式碼 -->
<style>
.g {
width: 240px;
height: 240px;
outline: 1px solid #000;
position: absolute;
top: 0;
z-index: 2;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
}
.g1 {
left: 10px;
grid-auto-flow: row;
}
.g2 {
left: 270px;
grid-auto-flow: row dense;
}
.g div {outline: 1px dashed #000;}
.a {z-index: 1;}
.a div:nth-child(1) {
grid-column: auto / span 2;
background: #f44;
}
.a div:nth-child(2) {
grid-column: auto / span 1;
background: #09f;
}
.a div:nth-child(3) {
grid-column: auto / span 2;
background: #0c0;
}
.a div:nth-child(4) {
grid-column: auto / span 1;
background: #f90;
}
.a div:nth-child(5) {
grid-column: auto / span 2;
background: #f0f;
}
.a div:nth-child(6) {
grid-column: auto / span 2;
background: #ff0;
}
.a div:nth-child(7) {
grid-column: auto / span 1;
background: #999;
}
.a div:nth-child(8) {
grid-column: auto / span 2;
background: #0ff;
}
.a div:nth-child(9) {
grid-column: auto / span 1;
background: #a9f;
}
</style>
grid-auto-columns、grid-auto-rows 自動格線
在「Grid 網格容器與格線」教學中有介紹過如何設定網格格線，而 CSS 也有提供「自動格線」的樣式屬性：grid-auto-columns 和 grid-auto-rows，自動格線表示當網格項目超過格線設定時，會「自動且重複」產生設定值的格線，這兩個樣式屬性「無法同時使用」，且需要搭配 grid-auto-flow 共同使用，參考下方搭配方式：
grid-auto-columns需要搭配grid-auto-flow: column。grid-auto-rows需要搭配grid-auto-flow: row。
下方的範例會分別使用兩組網格容器，當中「有透過格線」設定的網格只有「六個」，但卻放入了 16 個網格項目，超過六個之後的項目，會使用自動格線的設定排列，這種設定方式可針對「無法確定有多少個內容」的網格排版。
<!-- HTML 程式碼-->
<div class="g g1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g2"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<!-- CSS 程式碼 -->
<style>
.g {
width: 240px;
height: 200px;
outline: 1px solid #000;
margin: 10px 10px 25px;
display: grid;
}
.g1 {
grid-template-columns: repeat(3,1fr); /* 每一列都是三欄，彈性分配 1r */
grid-template-rows: repeat(2, 1fr); /* 換行後只有前兩列都是 1fr */
grid-auto-flow: row; /* row 流向 */
grid-auto-rows: 10px 50px; /* 超過兩列之後使用 10px 50px 的規律重複每一列 */
}
.g2 {
grid-template-columns: repeat(2, 1fr); /* 換行後只有前兩欄都是 1fr */
grid-template-rows: repeat(3, 1fr); /* 每一欄都是三列，彈性分配 1r */
grid-auto-flow: column; /* column 流向 */
grid-auto-columns: 10px 50px; /* 超過兩欄之後使用 10px 50px 的規律重複每一欄 */
}
.g div {outline: 1px solid #000;}
.g div:nth-child(n+7){background: #f90a;} /* 第六個之後的項目都有背景色 */
</style>
grid-row-gap、grid-column-gap、grid-gap 網格間距
grid-row-gap、grid-column-gap 和 grid-gap 樣式屬性可以從「格線」的層級，設定網格項目的排列間距，三個樣式屬性都沒有繼承特性，預設值都是 0，可使用長度單位的數值設定間距，的說明如下：
| 樣式屬性 | 說明 |
|---|---|
grid-row-gap |
每一列的間距，等同 row-gap。 |
grid-column-gap |
每一欄的間距，等同 column-gap。 |
grid-gap |
使用兩個數值同時設定列和欄的間距，寫法 (列 欄)，如果只有一個數值表示列和欄使用相同數值，等同 gap。 |
下方範例使用三組網格容器，分別呈現三種不同網格間距樣式屬性的呈現方式。
<!-- HTML 程式碼-->
<div class="g g1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g2"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g3"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<!-- CSS 程式碼 -->
<style>
.g {
width: 240px;
height: 240px;
outline: 1px solid #000;
margin: 10px 10px 25px;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
}
.g1 {grid-row-gap: 10px;}
.g2 {grid-column-gap: 10px;}
.g3 {grid-gap: 20px 5px;}
.g div {
background: #f609;
outline: 1px solid #000;
}
</style>
row-gap、column-gap、gap 網格間距 ( 新 )
row-gap、column-gap 和 gap 是比較新的樣式屬性，和 grid-row-gap、grid-column-gap 和 grid-gap 完全相同 ( 只有名稱不同 )，同樣是從「格線」的層級，設定網格項目的排列間距，三個樣式屬性都沒有繼承特性，預設值都是 0，可使用長度單位的數值設定間距，的說明如下：
這三個樣式屬性也可作用於 Flex 彈性元素，參考：row-gap、column-gap、gap 彈型元素間距
| 樣式屬性 | 說明 |
|---|---|
row-gap |
每一列的間距，等同 grid-row-gap。 |
column-gap |
每一欄的間距，等同 grid-column-gap。 |
gap |
使用兩個數值同時設定列和欄的間距，寫法 (列 欄)，如果只有一個數值表示列和欄使用相同數值，等同 grid-gap。 |
下方範例使用三組網格容器，分別呈現三種不同網格間距樣式屬性的呈現方式。
<!-- HTML 程式碼-->
<div class="g g1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g2"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g3"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<!-- CSS 程式碼 -->
<style>
.g {
width: 240px;
height: 240px;
outline: 1px solid #000;
margin: 10px 10px 25px;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
}
.g1 {row-gap: 10px;}
.g2 {column-gap: 10px;}
.g3 {gap: 20px 5px;}
.g div {
background: #f609;
outline: 1px solid #000;
}
</style>
小結
這篇教學所介紹的「流向」、「自動格線」和「間距」都是屬於比較細節的網格容器設定，雖然大多數的排版情況不會用到，但如果需要用到的時候卻很方便，有機會不妨使用看看吧。
延伸閱讀：Grid 網格容器與格線、Grid 網格空間與命名、Grid 排列網格項目、Grid 網格項目對齊、順序與對齊
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～