Grid 布局实现三栏布局

使用 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. ​响应式适配
   结合媒体查询实现小屏幕