CSS Grid布局是一種強大的二維布局系統，可以將頁面劃分為行和列，精確控制元素的位置和大小。以下是其完整功能介紹和示例演示：

基本概念

• 網格容器（Grid Container）：應用display: grid的元素。
• 網格項（Grid Item）：容器的直接子元素。
• 網格線（Grid Line）：劃分行和列的分界線。
• 網格軌道（Grid Track）：兩條相鄰網格線之間的空間。
• 網格單元格（Grid Cell）：行和列交叉形成的最小單位。
• 網格區域（Grid Area）：由多個單元格組成的矩形區域。

容器屬性

1. 定義網格結構
   • grid-template-columns和grid-template-rows：指定列和行的大小。

     .container {display: grid;grid-template-columns: 100px 200px 100px; /* 三列，寬度分別為100px、200px、100px */grid-template-rows: 100px 200px; /* 兩行，高度分別為100px、200px */
     }
     

   • repeat()函數：簡化重復的軌道定義。

     grid-template-columns: repeat(3, 1fr); /* 三列等寬，占據剩余空間 */
     

   • fr單位：表示可用空間的比例。
   • minmax()函數：定義軌道的最小和最大尺寸。

     grid-template-columns: 1fr minmax(200px, 1fr) 1fr; /* 中間列最小200px，最大占據剩余空間 */
     

   • auto關鍵字：根據內容自動調整大小。
2. 網格間距
   • gap（或row-gap、column-gap）：設置行和列之間的間距。

     .container {gap: 20px; /* 行間距和列間距均為20px */
     }
     

3. 定位網格項
   • grid-area：命名區域，簡化定位。

     .container {grid-template-areas:"header header header""sidebar content content""footer footer footer";
     }
     .header { grid-area: header; }
     .sidebar { grid-area: sidebar; }
     .content { grid-area: content; }
     .footer { grid-area: footer; }
     

   • grid-column-start、grid-column-end、grid-row-start、grid-row-end：精確控制項的位置和跨度。

     .item {grid-column-start: 1; /* 從第1列開始 */grid-column-end: 3; /* 到第3列結束 */grid-row-start: 2; /* 從第2行開始 */grid-row-end: 3; /* 到第3行結束 */
     }
     /* 簡寫形式 */
     .item {grid-column: 1 / 3; /* 從第1列到第3列 */grid-row: 2 / 3; /* 從第2行到第3行 */
     }
     

4. 命名網格線
   • 使用方括號[]為網格線命名，方便定位。

     .container {grid-template-columns: [left] 100px [center] 200px [right];grid-template-rows: [top] 100px [middle] 200px [bottom];
     }
     .item {grid-column: left / center; /* 從left線到center線 */grid-row: top / middle; /* 從top線到middle線 */
     }
     

項目屬性

• justify-self、align-self：控制單個項在單元格內的對齊方式。

  .item {justify-self: center; /* 水平居中對齊 */align-self: end; /* 垂直底部對齊 */
  }
  

示例演示

1. 簡單網格布局

   <div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div>
   </div>
   

   .container {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: 100px 100px;gap: 10px;
   }
   .item {background-color: lightgray;padding: 10px;text-align: center;
   }
   

   效果：六項均勻分布在3列2行的網格中。

2. 響應式布局

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

   效果：根據容器寬度自動調整列數，每列最小200px，最大占據剩余空間。

3. 復雜布局

   <div class="container"><div class="header">頭部</div><div class="sidebar">側邊欄</div><div class="content">內容</div><div class="footer">底部</div>
   </div>
   

   .container {display: grid;grid-template-areas:"header header header""sidebar content content""footer footer footer";grid-template-columns: 200px 1fr 200px;grid-template-rows: auto 1fr auto;gap: 10px;
   }
   .header { grid-area: header; }
   .sidebar { grid-area: sidebar; }
   .content { grid-area: content; }
   .footer { grid-area: footer; }
   

   效果：實現經典的三欄布局，頭部和底部通欄，側邊欄和內容區域自適應高度。

通過以上介紹和示例，可以看到CSS Grid布局的強大功能和靈活性，能夠輕松實現各種復雜的頁面布局。