使用 CSS Grid 布局實現三欄布局（左右固定 100px，中間自適應）的核心原理是通過網格模板精確控制列寬分配。以下是具體實現方法及優化技巧：

---

一、基礎實現

1. ?父容器設置
   為外層容器添加 display: grid 使其成為網格容器，并通過 grid-template-columns 定義列寬

   css

   .container {display: grid;grid-template-columns: 100px 1fr 100px; /* 左固定 | 中間自適應 | 右固定 */gap: 10px; /* 列間距 */
   }

   • 1fr 表示中間列占據剩余空間
   • gap 控制列間距，無需計算復雜邊距

      

2. ?子元素布局
   直接按順序放置子元素即可：

   html

   <div class="container"><div class="left">左欄（100px）</div><div class="center">中間自適應</div><div class="right">右欄（100px）</div>
   </div>

---

二、進階優化

1. ?響應式適配
   結合媒體查詢實現小屏幕