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. ​响应式适配
   结合媒体查询实现小屏幕堆叠布局：

   css

   @media (max-width: 768px) {
     .container {
       grid-template-columns: 1fr; /* 单列布局 */
     }
   }

2. ​元素对齐控制

   • 水平对齐：通过 justify-items 设置项的水平对齐方式（如 center）
   • 垂直对齐：通过 align-items 控制垂直对齐（如 stretch 默认撑满高度）

   css

   .container {
     align-items: start; /* 顶部对齐 */
     justify-items: center; /* 水平居中 */
   }

3. ​命名网格区域（语义化）​
   通过 grid-template-areas 增强可读性

   css

   .container {
     grid-template-areas: "left center right";
   }
   .left { grid-area: left; }
   .center { grid-area: center; }
   .right { grid-area: right; }

---

三、完整代码示例

html

<style>
  .container {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    gap: 10px;
    height: 200px;
  }
  .left, .right {
    background: #f0f0f0;
    padding: 20px;
  }
  .center {
    background: pink;
    padding: 20px;
  }
</style>

<div class="container">
  <div class="left">左栏</div>
  <div class="center">中间自适应区域</div>
  <div class="right">右栏</div>
</div>

 

---

四、与其他布局对比

特性	Grid 布局	Flexbox
​维度	二维布局（行列）	一维布局（主轴）
​自适应能力	原生支持 fr 单位	需配合 flex-grow
​对齐控制	行列独立对齐属性	主轴/交叉轴对齐
​代码复杂度	简洁（约 3 行核心代码）	需要管理 flex 属性
​响应式适配	支持自动换行（auto-fit）	需手动调整 flex-wrap

---

五、常见问题

1. ​高度不等问题
   Grid 默认会拉伸所有子项高度至容器高度（align-items: stretch），若需要高度独立可改为 align-items: start

2. ​旧版浏览器兼容
   通过 @supports 检测支持性并添加备用布局：

   css

   @supports not (display: grid) {
     /* 降级为 Flexbox 布局 */
   }