当前位置：首页 > news >正文

CSS Grid 布局

news 来源：原创 2025/5/16 13:36:09

使用 CSS Grid 布局实现三栏布局（左右固定 100px，中间自适应）的核心原理是通过网格模板精确控制列宽分配。以下是具体实现方法及优化技巧：

一、基础实现

父容器设置
为外层容器添加 display: grid 使其成为网格容器，并通过 grid-template-columns 定义列宽

css
```
.container {
  display: grid;
  grid-template-columns: 100px 1fr 100px; /* 左固定 | 中间自适应 | 右固定 */
  gap: 10px; /* 列间距 */
}
```
- 1fr 表示中间列占据剩余空间
- gap 控制列间距，无需计算复杂边距

子元素布局
直接按顺序放置子元素即可：

html

<div class="container">
  <div class="left">左栏（100px）</div>
  <div class="center">中间自适应</div>
  <div class="right">右栏（100px）</div>
</div>

二、进阶优化

响应式适配
结合媒体查询实现小屏幕堆叠布局：

css

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

元素对齐控制
- 水平对齐：通过 justify-items 设置项的水平对齐方式（如 center）
- 垂直对齐：通过 align-items 控制垂直对齐（如 stretch 默认撑满高度）
css
```
.container {
  align-items: start; /* 顶部对齐 */
  justify-items: center; /* 水平居中 */
}
```

命名网格区域（语义化）
通过 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
维度	二维布局（行列） 6	一维布局（主轴）
自适应能力	原生支持 fr 单位 6	需配合 flex-grow
对齐控制	行列独立对齐属性 7	主轴/交叉轴对齐
代码复杂度	简洁（约 3 行核心代码）	需要管理 flex 属性
响应式适配	支持自动换行（auto-fit）	需手动调整 flex-wrap

五、常见问题

高度不等问题
Grid 默认会拉伸所有子项高度至容器高度（align-items: stretch），若需要高度独立可改为 align-items: start
旧版浏览器兼容
通过 @supports 检测支持性并添加备用布局：
```
css
```
```
@supports not (display: grid) {
  /* 降级为 Flexbox 布局 */
}
```

通过 Grid 布局实现的三栏方案兼具代码简洁性和布局精确性，尤其适合需要复杂响应式设计的场景。如需进一步了解高级特性（如隐式网格、轨道重复模式），可参考 MDN Grid 文档