使用 Grid 網格容器與格線

Grid 網格排版是一種相當強大又具有彈性的排版系統，不僅可產生類似表格的排版機制，也具有延展或重複的功能，當網頁元素轉換為「Grid 網格容器」之後，就能藉由各種 Grid 相關樣式屬性進行排版，這篇教學會介紹什麼是 Grid 網格容器，以及構成網格的 grid-template-columns、grid-template-rows 等格線樣式屬性。

延伸閱讀：Grid 網格空間與命名、Grid 網格流向與間距、Grid 排列網格項目、Grid 網格項目對齊、順序與對齊

快速導覽：

• 認識網格容器 Grid
• 網格容器基本架構
• grid-template-columns、grid-template-rows 網格線
  • 固定網格尺寸
  • 彈性網格尺寸
  • 根據內容改變網格尺寸
  • 網格尺寸自動符合內容
  • 重複產生指定尺寸的網格
  • 自動填滿網格

認識網格容器 Grid

當元素的 display 顯示類型設定為 Grid 或 inline-grid 時，該元素就變成了「網格容器 Grid container」，網格容器裡的所有子元素都會變成「網格項目 Grid item」( 子元素裡的子元素不會變成網格項目 )，將整個網格容器和網格項目組合起來，就會形成類似「表格」的排版方式，相關說明如下：

下方範例將五個 div 分別設定成不同的顯示類型，可以看見 inline 顯示類型不會換行也無法調整寬高，inline-grid 元素表現和 inline-block 相同，grid 元素表現和 block 相同。

線上展示：https://codepen.io/oxxo/pen/KKOgYOO

<!-- HTML 程式碼-->
<div class="i">inline</div>
<div class="ib">inline</div>
<div class="gi">inline-grid</div>
<div class="b">block</div>
<div class="gb">grid</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 50px;
    margin: 5px;
  }
  .i {display: inline;}
  .ib {display: inline-block;}
  .gi {display: inline-grid;}
  .gb {display: grid;}
</style>

當元素變成網格容器後，網格項目「不支援」下列 CSS 樣式屬性：float、clear、vertical-align、column-*，同時如果元素「沒有標籤」包覆，也會自動使用「虛擬標籤」替代 ( 不建議出現這種網頁內容，因不符合該元素的型態 )，下方範例使用兩組 div，第一組 div 的子元素有設定不支援的樣式屬性，第二組則展示沒有標籤包覆的內容會使用虛擬標籤包覆，而使用 i 和 div 標籤包覆的元素會被轉換成網格項目，最後就會按照設定呈現三欄。

線上展示：https://codepen.io/oxxo/pen/XWvjwrd

<!-- HTML 程式碼-->
<div class="gb">
<div class="g1">apple</div>
<div class="g2">banana <br>banana</div>
<div class="g3">oxxo</div>
</div>
<div class="gb g2">
  apple <br> banana <i>oxxo</i>
  <div>coconut</div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 20px;
  }
  .gb {
    width: 300px;
    display: grid;
    grid-template-columns: 100px 100px 100px; /* 設定三欄，每一欄寬度 100px */
  }
  .g1 {float: right;}                 /* 這個樣式會被忽略 */
  .g2, .g3 {vertical-align: bottom;}  /* 這個樣式會被忽略 */
</style>

網格容器基本架構

使用網格排版最重要的就是「網格線」，由水平和垂直網格線會構成「網格」，這些網格會組成網格容器的「基本架構」，基本架構和網格項目 ( 子元素 ) 沒有直接關係，而是提供網格項目放置位置和大小的參考依據，網格容器基本架構如下：

• grid line ( 網格線 )：垂直或水平的格線。
• grid track ( 軌道 )：網格線左右或上下的垂直或水平連續空間。
• grid cell ( 單元格 )：由網格線構成的 1x1 空間。
• grid area ( 網格區域 )：由網格線構成大於 1x1 的空間。

grid-template-columns、grid-template-rows 網格線

網格線由水平的「colume 欄」和垂直的「row 列」所組成，colume 對應的樣式屬性為 grid-template-columns，row 對應的樣式屬性為 grid-template-rows，這兩個樣式屬性都沒有繼承特性，預設值為 none，屬性值使用「track-list」語法計算「網格的數量與寬度」，撰寫格式如下：

• 使用「空白」分隔多個數值。
• 每個數值代表「網格的寬度」，也可當作「相對」前一個數值的「網格線的位置」。

如果分不清楚中文的「列」究竟是垂直還是水平，但只要開啟 Word、Excel 或 Google 試算表，所有表格的中文翻譯，垂直方向都是「列」，因此 row 的翻譯也就對應到「列」。

了解撰寫格式後，可以使用下列幾種寫法設定網格的數量和寬度：

當網格線設定完成，網格項目預設會按照「左到右、上到下」的順序放入網格中，下方使用「固定格線位置」寫法，可以看出雖然內容元素都是「九個」，但會按照網格設定的不同，產生不同的排版方式。

線上展示：https://codepen.io/oxxo/pen/YzmGbKY

<!-- 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>
<div class="g g3">
  <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>
  div {border: 1px dotted #666;}
  .g {
    width: max-content;
    border: 1px solid #000;
    display: grid;
    margin: 10px;
    float: left;
  }
  /* 3x3 */
  .g1 {
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
  }
  /* 5x2 */
  .g2 {
    grid-template-columns: 20px 30px 40px 50px 60px;
    grid-template-rows: 25px 50px;
  }
  /* 2x5 */
  .g3 {
    grid-template-columns: 25px 50px;
    grid-template-rows: 20px 30px 40px 50px 60px;
  }
</style>

固定網格尺寸

「固定網格尺寸」是最基本的網格設定方式，只需要使用具有「長度單位」的數值標記「網格尺寸」，支援絕對長度和相對長度單位，相對長度的百分比單位會參考網格容器的寬度或高度，下方列出相關寫法 ( 前三個 div 寬度為 300px，後三個 div 高度為 100px )：

線上展示：https://codepen.io/oxxo/pen/PoMGvYd

<!-- HTML 程式碼-->
grid-template-columns: 150px 150px;
<div class="g g1"><div>150px</div><div>150px</div></div>
grid-template-columns: 50% 50%;
<div class="g g2"><div>50%</div><div>50%</div></div>
grid-template-columns: 100px 50px 50%;
<div class="g g3"><div>100px</div><div>50px</div><div>50%</div></div>
grid-template-rows: 50px 50px;
<div class="g r g4"><div>50px</div><div>50px</div></div>
grid-template-rows: 50% 50%;
<div class="g r g5"><div>50%</div><div>50%</div></div>
grid-template-rows: 25px 25px 50%;
<div class="g r g6"><div>25px</div><div>25px</div><div>50%</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 15px;
  }
  .g1 {grid-template-columns: 150px 150px;}
  .g2 {grid-template-columns: 50% 50%;}
  .g3 {grid-template-columns: 100px 50px 50%;}

  .r {
    width: 60px;
    height: 100px;
  }
  .g4 {grid-template-rows: 50px 50px;}
  .g5 {grid-template-rows: 50% 50%;}
  .g6 {grid-template-rows: 25px 25px 50%;}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
</style>

使用固定網格尺寸的方式設定網格時，如果身為父元素的網格容器也有設定寬高，則可能會發生空間不足而「溢出空間」或空間太多「無法填滿空間」的狀況，除非有確定非得是這種尺寸，通常不太會使用固定網格尺寸的方式進行排版，下方範例會展示這些溢出或不足的情形。

線上展示：https://codepen.io/oxxo/pen/oNKzRNe

<!-- HTML 程式碼-->
寬度剛剛好
<div class="g g1"><div class="a1">100px</div><div class="a2">100px</div><div class="a3">100px</div></div>
溢出網格容器
<div class="g g2"><div class="a1">100px</div><div class="a2">150px</div><div class="a3">100px</div></div>
網格容器寬度太大
<div class="g g3"><div class="a1">100px</div><div class="a2">50px</div><div class="a3">100px</div></div>
溢出網格容器
<div class="g g4"><div class="a1">25%</div><div class="a2">25%</div><div class="a3">50%</div></div>
網格容器寬度太大
<div class="g g5"><div class="a1">25%</div><div class="a2">25%</div><div class="a3">60%</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 15px;
  }
  .g1 {grid-template-columns: 100px 100px 100px;}
  .g2 {grid-template-columns: 100px 150px 100px;}
  .g3 {grid-template-columns: 100px 50px 100px;}
  .g4 {grid-template-columns: 25% 25% 50%;}
  .g5 {grid-template-columns: 25% 25% 60%;}

  .a1 {background: #f33a;}
  .a2 {background: #0f0a;}
  .a3 {background: #09fa;}
</style>

彈性網格尺寸

「彈性網格尺寸」是會透過「分成幾等分」的方式，將網格容器的「可用空間」，根據設定進行分成幾等分，使用的數值單位是「fr」，只支援「大於零」的數值，下方展示 fr 單位的計算方式：

下方範例使用六個 div，前三個 div 寬度為 300px，後三個 div 高度為 100px，從中可以看出彈性網格尺寸對於尺寸的表現。

線上展示：https://codepen.io/oxxo/pen/PoMGvod

<!-- HTML 程式碼-->
grid-template-columns: 1fr 1fr;
<div class="g g1"><div>1fr</div><div>1fr</div></div>
grid-template-columns: 2.5fr 2.5fr;
<div class="g g2"><div>2.5fr</div><div>2.5f</div></div>
grid-template-columns: 1fr 1fr 2fr;
<div class="g g3"><div>1fr</div><div>1fr</div><div>2fr</div></div>
grid-template-rows: 1fr 1fr;
<div class="g r g4"><div>1fr</div><div>1fr</div></div>
grid-template-rows: 2.5fr 2.5fr;
<div class="g r g5"><div>2.5fr</div><div>2.5fr</div></div>
grid-template-rows: 1fr 1fr 2fr;
<div class="g r g6"><div>1fr</div><div>1fr</div><div>2fr</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 15px;
  }
  .g1 {grid-template-columns: 1fr 1fr;}
  .g2 {grid-template-columns: 2.5fr 2.5fr;}
  .g3 {grid-template-columns: 1fr 1fr 2fr;}

  .r {
    width: 60px;
    height: 100px;
  }
  .g4 {grid-template-rows: 1fr 1fr;}
  .g5 {grid-template-rows: 2.5fr 2.5fr;}
  .g6 {grid-template-rows: 1fr 1fr 2fr;}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
</style>

因為 fr 單位是以「容器剩餘可用寬度」進行計算，所以可以搭配固定網格尺寸一起使用，下方範例使用四個 div，裡頭都有固定尺寸的網格項目，而使用 fr 為單位的彈性網格會自動分配並補滿剩餘的寬度。

線上展示：https://codepen.io/oxxo/pen/WNVGBNW

<!-- HTML 程式碼-->
grid-template-columns: 100px 1fr 1fr;
<div class="g g1"><div>100px</div><div>1fr</div><div>1fr</div></div>
grid-template-columns: 100px 2.5fr 2.5fr;
<div class="g g2"><div>100px</div><div>2.5fr</div><div>2.5f</div></div>
grid-template-columns: 100px 1fr 3fr;
<div class="g g3"><div>100px</div><div>1fr</div><div>3fr</div></div>
grid-template-columns: 50px 1fr 50px;
<div class="g g4"><div>50px</div><div>1fr</div><div>50px</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 15px;
  }
  .g1 {grid-template-columns: 100px 1fr 1fr;}
  .g2 {grid-template-columns: 100px 2.5fr 2.5fr;}
  .g3 {grid-template-columns: 100px 1fr 3fr;}
  .g4 {grid-template-columns: 50px 1fr 50px;}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
</style>

根據內容改變網格尺寸

「根據內容改變網格尺寸」表示網格的尺寸會根據「網格內容」而改變，有下列幾種設定語法：

下方範例中設定為 max-content 的項目會將寬度自動調整為內容所需空間的最大值，設定為 min-content 的 項目會將寬度自動調整為內容所需空間的最小值，如果遇到「過長」的文字內容，就會發生不換行且溢出容器範圍的狀況，如果其他的項目設定單位 fr 的彈性網格，也會因為過長的文字壓縮寬度，甚至在沒有內容時發生網格消失的現象。

線上展示：https://codepen.io/oxxo/pen/MWNjdYw

<!-- HTML 程式碼-->
max-content max-content max-content
<div class="g g1"><div>apple</div><div>banana</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
min-content min-content min-content
<div class="g g2"><div>apple</div><div>banana</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
20px 20px max-content
<div class="g g3"><div>apple</div><div>banana</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
1fr 1fr max-content
<div class="g g4"><div></div><div></div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
1fr 1fr max-content
<div class="g g5"><div>Hello World!! I am oxxo, how are you?</div><div>banana</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
max-content 1fr 1fr 
<div class="g g6"><div>Hello World!! I am oxxo.studio, how are you?</div><div>apple</div><div>banana</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 15px;
  }
  .g1 {grid-template-columns: max-content max-content max-content;}
  .g2 {grid-template-columns: min-content min-content min-content;}
  .g3 {grid-template-columns: 20px 20px max-content;}
  .g4 {grid-template-columns: 1fr 1fr max-content;}
  .g5 {grid-template-columns: 1fr 1fr max-content;}
  .g6 {grid-template-columns: max-content 1fr 1fr ;}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
</style>

使用 max-content 或 min-content 都會受限於內容本身，因此常會發生不如預期的狀況，這時可以透過 minmax(min, max) 語法，將網格寬度限制在特定的範圍裡，就能更容易掌握排版狀況，下方範例使用四個 div 展示不同的 minmax 設定結果。

線上展示：https://codepen.io/oxxo/pen/YzmGbPe

<!-- HTML 程式碼-->
max-content max-content minmax(0, max-content)
<div class="g g1"><div>apple</div><div>banana</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
minmax(min-content, max-content) minmax(min-content, max-content) max-content
<div class="g g2"><div>o oxxo</div><div>ba banana</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
minmax(min-content, max-content) minmax(min-content, max-content) minmax(0, max-content)
<div class="g g3"><div>o oxxo</div><div>ba banana</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
minmax(10px, max-content) minmax(10px, max-content) minmax(0, max-content)
<div class="g g4"><div></div><div></div><div>Hello World!! I am oxxo.studio, how are you?</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 55px;
  }
  .g1 {grid-template-columns: max-content max-content minmax(0, max-content);}
  .g2 {grid-template-columns: minmax(min-content, max-content) minmax(min-content, max-content) max-content;}
  .g3 {grid-template-columns: minmax(min-content, max-content) minmax(min-content, max-content) minmax(0, max-content);}
  .g4 {grid-template-columns: minmax(10px, max-content) minmax(10px, max-content) minmax(0, max-content);}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
</style>

網格尺寸自動符合內容

「網格尺寸符合內容」表示網格的尺寸會根據「網格內容」而改變，並盡可能「符合內容的最大寬度或最小寬度」，使用的語法為「fit-content(val)」，val 使用長度單位數值，使用後會讓「網格項目永遠保持在網格容器裡」，除非內容真的太長，不然不會溢出容器，基本上會按照「max(minimum, min(limit, max-content))」公式計算，如果遇到多個欄位互相比較，則會按照「minmax(auto, max-content)」和「minmax(auto, limit)」計算出較小的值作為調整參考。

不過通常在排版時不會考慮這些公式 ( 也很難去計算 )，只需要參考下方常見的狀況使用：

• 內容最大寬度 < 網格容器可用空間

  數值比較	呈現結果
  val < 內容最小寬度	內容最小寬度
  內容最小寬度 < val < 內容最大寬度	val 數值作為寬度
  內容最大寬度 < val	內容最大寬度

• 內容最大寬度 > 網格容器可用空間

  數值比較	呈現結果
  val < 內容最小寬度	內容最小寬度
  內容最小寬度 < val < 網格容器可用空間	val 數值作為寬度
  網格容器可用空間 < val	網格容器可用空間

下方範例中的 div，會呈現出下列的長相：

• 第一個 div，val 數值都小於內容最小寬度，最後呈現結果就會是內容最小寬度
• 第二個 div，val 數值都大於最小寬度，但因為 val 仍小於內容最大寬度，會採用 val 數值作為寬度。
• 第三到第五個 div：val 數值都大於內容最大寬度，會先採用內容最大寬度，若所有網格的最大寬度加起來超過網格容器寬度，就會根據公式計算分配彼此的寬度。

線上展示：https://codepen.io/oxxo/pen/bGXwyNZ

<!-- HTML 程式碼-->
fit-content(5px) fit-content(5px) fit-content(5px)
<div class="g g1"><div>o ox oxx oxxo</div><div>1 2 3 4 5</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
fit-content(50px) fit-content(50px) fit-content(150px)  
<div class="g g2"><div>o ox oxx oxxo</div><div>1 2 3 4 5</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
fit-content(5000px) fit-content(5000px) fit-content(5000px)
<div class="g g3"><div>o ox oxx oxxo</div><div>1 2 3 4 5 6 7</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
<div class="g g3"><div>Hello World!! I am oxxo.studio, how are you?</div><div>o ox oxx oxxo</div><div>1 2 3 4 5</div></div>
<div class="g g3"><div>o ox oxx oxxo</div><div>1 2 3</div><div>1 2 3 4 5</div></div>


<!-- CSS 程式碼 -->
<style>
  .g {
    width: 400px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 55px;
  }
  .g1 {grid-template-columns: fit-content(5px) fit-content(5px) fit-content(5px);}
  .g2 {grid-template-columns: fit-content(50px) fit-content(50px) fit-content(150px);}
  .g3 {grid-template-columns: fit-content(5000px) fit-content(5000px) fit-content(5000px);}
  .g3 {margin-bottom: 15px}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
</style>

重複產生指定尺寸的網格

「重複產生指定尺寸的網格」會根據「重複的次數」，重複產生指定尺寸的網格，撰寫語法如下：

• 語法：repeat(重複次數, 網格設定)。
• 重複次數：
  • 使用「非負值的整數」，表示要重複幾次後方所設定的網格
  • 使用「auto-fill」或「auto-fit」，會自動計算網格容器可容納幾次重複。
• 網格設定：可使用之前段落介紹的所有方式設定網格，參考：
  • 使用「空白」分隔網格。
  • 使用「長度、fr」數值設定網格尺寸
  • 支援 max-content、min-content、minmax(min, max)、fit-content(val) 語法。

下方範例分別讓三種不同網格設定的網格重複三次，如果後方網格設定為一格，重複三次之後就會變成三格，如果是兩個就會變成六格，三格就會變成九格 ( 注意，如果使用固定尺寸的網格，可能會發生溢出網格容器的狀況 )。

線上展示：https://codepen.io/oxxo/pen/KKOgLpP

<!-- HTML 程式碼-->
repeat(3, 40px)
<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>
repeat(3, 40px 40px)
<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>
repeat(3, 40px 40px 40px)
<div class="g g3"><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: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 25px;
  }
  .g1 {grid-template-columns: repeat(3, 40px);}
  .g2 {grid-template-columns: repeat(3, 40px 40px);}
  .g3 {grid-template-columns: repeat(3, 40px 40px 40px);}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
  .g div:nth-child(4) {background: #fc0a;}
  .g div:nth-child(5) {background: #b0fa;}
  .g div:nth-child(6) {background: #666a;}
  .g div:nth-child(7) {background: #05fa;}
  .g div:nth-child(8) {background: #f09a;}
  .g div:nth-child(9) {background: #f90a;}
</style>

如果指了定重複次數但又不想溢出容易，就需要搭配 fr 單位 或 max-content、min-content、minmax(min, max)、fit-content(val) 語法共同操作，下方範例會透過寬度的設定，讓網格項目不會溢出容器 ( 注意如果網格裡有固定尺寸的網格，當所有的固定尺寸和最小容器尺寸相加後大於容器寬度，仍然會溢出容器 )。

線上展示：https://codepen.io/oxxo/pen/xxvENGq

<!-- HTML 程式碼-->
repeat(3, 1fr 2fr 3fr)
<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>
repeat(3, 50px 1fr 1fr)
<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>
repeat(3, minmax(min-content, 80px) 70px)
<div class="g g3"><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>
repeat(3, minmax(min-content, 80px) 20px)
<div class="g g4"><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: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 25px;
  }
  .g1 {grid-template-columns: repeat(3, 1fr 2fr 3fr);}
  .g2 {grid-template-columns: repeat(3, 50px 1fr 1fr);}
  .g3 {grid-template-columns: repeat(3, minmax(min-content, 80px) 70px);}
  .g4 {grid-template-columns: repeat(3, minmax(min-content, 80px) 20px);}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
  .g div:nth-child(4) {background: #fc0a;}
  .g div:nth-child(5) {background: #b0fa;}
  .g div:nth-child(6) {background: #666a;}
  .g div:nth-child(7) {background: #05fa;}
  .g div:nth-child(8) {background: #f09a;}
  .g div:nth-child(9) {background: #f90a;}
</style>

當「重複」撰寫 repeat() 時，會自動將所有重複次數加總，例如下方範例，兩個重複三次就會變成六次，三個重複三次就會變成九次。

線上展示：https://codepen.io/oxxo/pen/OJKRYVa

<!-- HTML 程式碼-->
repeat(3, 15px) repeat(3, 50px)
<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>
repeat(3, 15px) repeat(3, 50px) repeat(3, 30px)
<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: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 25px;
  }
  .g1 {grid-template-columns: repeat(3, 15px) repeat(3, 50px);}
  .g2 {grid-template-columns: repeat(3, 15px) repeat(3, 50px) repeat(3, 30px);}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
  .g div:nth-child(4) {background: #fc0a;}
  .g div:nth-child(5) {background: #b0fa;}
  .g div:nth-child(6) {background: #666a;}
  .g div:nth-child(7) {background: #05fa;}
  .g div:nth-child(8) {background: #f09a;}
  .g div:nth-child(9) {background: #f90a;}
</style>

自動填滿網格

使用 repeat 語法時，如果「不想要溢出網格容器」但又無法確定重複次數，就可以使用「auto-fill」或「auto-fit」設定值代替重複次數，當發生「溢出容器」的狀況時，就會自動將下一次重複的網格換行*，從下方範例可以看出設定 auto-fill 和 auto-fit 的網格容器，因為「9」這格擺放溢出了容器，就自動將這格換行 ( 注意，自動填滿網格的寫法不支援 fr 單位 )。

線上展示：https://codepen.io/oxxo/pen/MWNjdaw

<!-- HTML 程式碼-->
repeat(auto-fill, 10px 60px)
<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>
repeat(auto-fit, 10px 60px)
<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: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 25px;
  }
  .g1 {grid-template-columns: repeat(auto-fill, 10px 60px);}
  .g2 {grid-template-columns: repeat(auto-fit, 10px 60px);}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
  .g div:nth-child(4) {background: #fc0a;}
  .g div:nth-child(5) {background: #b0fa;}
  .g div:nth-child(6) {background: #666a;}
  .g div:nth-child(7) {background: #05fa;}
  .g div:nth-child(8) {background: #f09a;}
  .g div:nth-child(9) {background: #f90a;}
</style>

雖然 auto-fill 和 auto-fit 呈現的效果很相似，但由於 auto-fill 會建立一個可以包涵所有項目的空間 ( 可稱作「軌道 track」 ) 而 auto-fit 不會建立這個空間，當網格項目不足以填滿網格容器的狀態下進行「對齊」，就產生不同的呈現方式，下方範例將網格容器都設定為「justify-content: center;」水平置中，根據填滿方式的不同產生不同的顯示方式：

線上展示：https://codepen.io/oxxo/pen/dyxpEYZ

<!-- HTML 程式碼-->
repeat(auto-fill, 10px 60px)
<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>
repeat(auto-fit, 10px 60px)
<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>

repeat(auto-fill, 10px 60px)
<div class="g g3"><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>
repeat(auto-fit, 10px 60px)
<div class="g g4"><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: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 55px;
    justify-content: center;
  }
  .g1 {grid-template-columns: repeat(auto-fill, 10px 30px);}
  .g2 {grid-template-columns: repeat(auto-fit, 10px 30px);}

  .g3 {grid-template-columns: repeat(auto-fill, 20px 60px);}
  .g4 {grid-template-columns: repeat(auto-fit, 20px 60px);}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
  .g div:nth-child(4) {background: #fc0a;}
  .g div:nth-child(5) {background: #b0fa;}
  .g div:nth-child(6) {background: #666a;}
  .g div:nth-child(7) {background: #05fa;}
  .g div:nth-child(8) {background: #f09a;}
  .g div:nth-child(9) {background: #f90a;}
</style>

小結

Grid 網格容器是 CSS 排版的最新功能，雖然較為複雜，但能做到的事情也更多，這篇教學只是介紹網格的架構，接下來還有其他篇幅會介紹更多細節設定！

延伸閱讀：Grid 網格空間與命名、Grid 網格流向與間距、Grid 排列網格項目、Grid 網格項目對齊、順序與對齊

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～