CSS display:grid 将元素转为网格容器，适合处理分栏、卡片列表等二维布局。本文从容器与子项的分工讲起，提供最小可用代码与响应式示例，并总结常见踩坑点与修复方案，帮助读者快速搭建稳定且易维护的网格结构。
网格容器与子项的分工
为元素设置 display:grid 后，该元素会成为网格容器（grid container），其直接子元素自动成为网格项（grid items），并进入网格格式化上下文。与普通块级元素默认从上到下堆叠不同，Grid 会先按定义的列与行分配空间，再将子项放入对应网格单元，因此更适合同时控制横向与纵向布局。
需要注意的是，display:grid 仅影响直接子元素。若孙级元素也需要参与网格排布，必须在对应的父层级再次声明网格属性。
- 设置前：子元素按普通文档流纵向排列
- 设置后：父元素负责划分网格，直接子元素按网格单元排布
- 布局控制集中在父元素，包括列定义、行定义、间距与对齐方式
最小可用示例与核心属性
实现基础网格布局时，父元素负责声明 display:grid、grid-template-columns 与 gap；子元素通常只需保留内容结构，必要时补充对齐或跨列设置。
grid-template-columns 用于定义每列宽度分配。fr 单位表示按剩余空间比例分配，例如 1fr 1fr 1fr 即三列等分。gap 统一控制行列间距。align-items 控制子项在单元格内的纵向对齐，justify-items 控制横向对齐。
以下是最小可用示例：
1
2
3
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: start;
justify-items: stretch;
}
.item {
padding: 16px;
border: 1px solid #ddd;
background: #f8f8f8;
}- 父元素优先声明
display:grid - 列定义常用
repeat(3, 1fr)实现等分 gap替代旧版grid-gap，统一控制间距fr为比例单位，非固定像素
响应式卡片布局示例
卡片列表是 Grid 的典型应用场景。以下示例包含基础四列布局、媒体查询断点适配，以及使用 auto-fit 与 minmax() 的自动换列写法。
卡片1
卡片2
卡片3
卡片4
.card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.card {
padding: 20px;
border: 1px solid #e5e5e5;
background: #fff;
min-height: 120px;
}
@media (max-width: 992px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.card-grid {
grid-template-columns: 1fr;
}
}若希望减少断点维护成本，可将列定义替换为：
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));该写法会根据容器可用宽度自动计算列数，当空间不足时自动换行，适合商品宫格、文章列表等响应式场景。
- 基础版：四列等宽，适合桌面端卡片展示
- 平板适配：媒体查询切换为两列，避免内容挤压
- 移动端适配：切换为单列，提升阅读体验
- 自动适配版：
repeat(auto-fit, minmax(220px, 1fr))减少断点维护
常见问题排查与修复
实际开发中，Grid 布局常因属性位置或内容溢出导致异常。以下按“问题-原因-修复”结构总结高频踩坑点。
布局未生效
若设置 display:grid 后子元素仍按默认流排列，通常是因为将 grid-template-columns 或 gap 误写在子元素上。修复方式是将这些属性移回父容器，例如：
.list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}小屏幕下列数固定导致挤压
固定列数在窄屏下会压缩卡片宽度。可通过媒体查询动态调整列数，或改用 minmax() 实现弹性分配：
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));内容溢出或文字不换行
Grid 仅负责空间分配，不处理内容溢出。若子项内容撑破容器，需补充以下规则之一：
min-width: 0：允许弹性子项收缩word-break: break-word或overflow-wrap: break-word：强制长文本换行overflow: hidden：隐藏溢出内容
嵌套层级未参与网格
Grid 仅作用于直接子元素。若深层元素未对齐，需检查 HTML 结构，并在对应父层级再次声明 display:grid。
掌握 display:grid 的关键在于明确容器与子项的职责划分。熟练运用 grid-template-columns、gap 与对齐属性后，结合媒体查询或 minmax() 即可快速构建可维护的二维布局。
