如何用CSS Grid实现图片分块容器效果？

你不用拆分图片，直接用单张背景图+Grid网格项的背景定位就能实现，这比拆分图片高效得多，还能保证显示一致。

核心实现思路 #

把目标图片作为每个网格项的背景图，通过调整每个网格项的background-position来显示图片的对应区域，再配合Grid的行列划分，就能实现分块效果。

代码示例 #

假设要实现3×2的规则图片分块（可根据你的需求调整行列数和网格大小）：

<div class="image-grid">
  <div class="grid-item item-1"></div>
  <div class="grid-item item-2"></div>
  <div class="grid-item item-3"></div>
  <div class="grid-item item-4"></div>
  <div class="grid-item item-5"></div>
  <div class="grid-item item-6"></div>
</div>

.image-grid {
  display: grid;
  /* 定义3列均分宽度，2行固定高度 */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 8px; /* 网格项之间的间距 */
  width: 600px; /* 容器总宽度，按需调整 */
}

.grid-item {
  background-image: url('你的图片路径');
  background-size: cover; /* 保证图片覆盖网格项区域 */
  background-repeat: no-repeat;
}

/* 逐个设置背景定位，显示图片对应区块 */
.item-1 { background-position: top left; }
.item-2 { background-position: top center; }
.item-3 { background-position: top right; }
.item-4 { background-position: bottom left; }
.item-5 { background-position: bottom center; }
.item-6 { background-position: bottom right; }

如果是不规则分块（比如部分网格项跨行列），只需给对应网格项添加grid-column/grid-row属性调整占位，再同步修改background-position即可适配。

学习资源推荐 #

• MDN Web Docs的CSS Grid布局模块文档：权威全面，覆盖从基础概念到进阶用法的所有细节
• CSS-Tricks的《A Complete Guide to Grid》：入门友好，用直观示例快速讲解Grid核心特性
• YouTube博主Kevin Powell的CSS Grid系列教程：实操性强，通过案例演示Grid的各种应用场景
• FreeCodeCamp的CSS Grid交互式课程：包含大量练习，帮你快速巩固知识点

内容的提问来源于stack exchange，提问作者A Ab