昨天介紹了 Grid 網格系統的基本概念，包含網格容器、網格項目、網格線與網格軌道，也學會使用 grid-template-columns、grid-template-rows 和 gap 建立基本的網格版面。

不過，當我們需要讓某個項目跨越多個欄位或列、調整個別項目的對齊方式，或建立能適應不同螢幕尺寸的響應式網格時，只設定容器屬性還不夠。今天將繼續介紹 Grid 的項目屬性與進階功能，讓網格版面可以更精確也更靈活。

接下來會說明如何指定項目的位置和大小，以及如何使用 repeat()、auto-fit、auto-fill 和 minmax() 建立響應式網格。最後也會透過實際範例，整理 Flexbox 與 Grid 的差異，幫助你在不同排版需求下選擇適合的工具！

Grid 網格系統（續）

項目屬性

這些屬性用於控制個別項目在網格中的位置和大小，需設定在 Grid 容器內部的子元素上。

• **Grid-column / Grid-row 指定位置：**這些屬性讓你精確控制項目佔據的欄和列。

  .item {
    /* 指定欄位置 */
    grid-column-start: 1; /* 從第 1 條欄線開始 */
    grid-column-end: 3; /* 到第 3 條欄線結束（佔 2 欄）*/
  
    /* 簡寫 */
    grid-column: 1 / 3; /* 從第 1 條線 ~ 第 3 條線 */
    grid-column: 1 / span 2; /* 從第 1 條線開始，跨越 2 欄 */
  }
  

  

  .item {
    /* 指定列位置 */
    grid-row-start: 1;
         /* 從第 1 條列線開始 */
    grid-row-end: 3;
           /* 到第 3 條列線結束（佔 2 列）*/
  
    /* 簡寫 */
    grid-row: 1 / 3;
           /* 從第 1 條線 ~ 第 3 條線 */
    grid-row: 1 / span 2;
      /* 從第 1 條線開始，跨越 2 列 */
  }
  

  

  使用負數從後往前數：

  .item {
    grid-column: 1 / -1; /* 從第一條線到最後一條線（佔滿所有欄）*/
    grid-row: 2 / -2; /* 從第二條線到倒數第二條線 */
  }
  

  

  使用 span 關鍵字，表示跨越幾欄或幾列：

  .item {
    grid-column: span 2; /* 跨越 2 欄（從當前位置開始）*/
    grid-row: span 3; /* 跨越 3 列 */
  }
  

• Justify-self / Align-self 個別對齊：這些屬性可以覆蓋容器的 justify-items 和 align-items 設定，只作用於單一項目。

  .item {
    /* 水平對齊 */
    justify-self: start; /* 靠左對齊 */
    justify-self: end; /* 靠右對齊 */
    justify-self: center; /* 置中對齊 */
    justify-self: stretch; /* 拉伸填滿 */
  }
  

  .item {
    /* 垂直對齊 */
    align-self: start; /* 靠上對齊 */
    align-self: end; /* 靠下對齊 */
    align-self: center; /* 置中對齊 */
    align-self: stretch; /* 拉伸填滿 */
  }
  

進階功能

• 使用 repeat() 和 auto-fit / auto-fill：repeat() 函數搭配 auto-fit 或 auto-fill 可以建立響應式網格。

  .container {
    /* auto-fill：盡可能多地放置欄位，即使是空的 */
    grid-template-columns: repeat(auto-fill, 200px);
  
    /* auto-fit：只放置需要的欄位，並拉伸它們 */
    grid-template-columns: repeat(auto-fit, 200px);
  
    /* 搭配 minmax() 建立真正的響應式網格 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  

  auto-fill vs auto-fit 的差異：

  • auto-fill：即使沒有足夠的項目，也會建立空的欄位
  • auto-fit：只建立需要的欄位，並將剩餘空間分配給現有欄位

• 使用 minmax() 設定彈性尺寸：minmax() 函數定義網格軌道的最小和最大尺寸。

  .container {
    /* 最小 100px，最大 1fr */
    grid-template-columns: minmax(100px, 1fr) 200px;
  
    /* 最小由內容決定，最大 300px */
    grid-template-columns: minmax(min-content, 300px);
  
    /* 響應式：最小 200px，最大填滿可用空間 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  

使用範例

1. 基本網格版面

   .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
   }
   

2. 響應式卡片網格

   .card-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
   }
   

3. 不規則網格

   .gallery {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     grid-auto-rows: 100px;
     gap: 10px;
   }
   .item-1 {
     grid-row: span 2;
   }
   .item-2 {
     grid-column: span 2;
   }
   .item-3 {
     grid-row: span 3;
   }
   

總結

這幾天討論了 CSS 的兩大排版系統：Flexbox 與 Grid。以下表格統整了兩者的特性：

從單行排列的 Flexbox 到行列交錯的 Grid，透過這些具體技術和範例，你現在能夠：

1. 使用 Flexbox 處理單向排列，如導航列、按鈕組等元件
2. 使用 Grid 建立複雜的二維版面，如整體頁面排版、卡片網格等
3. 掌握響應式網格的建立方法，使用 auto-fit、minmax() 等進階功能
4. Flexbox 與 Grid 相互搭配使用，可以在 Grid 容器內使用 Flexbox 排列項目，或在 Flexbox 容器內的項目使用 Grid 排版

掌握這些技巧後，你將能夠靈活運用 Flexbox 與 Grid，甚至將兩者結合使用，製作出各種現代化的網頁排版。