CSS Grid 是实现九宫格图片布局最直接、可控的方式，通过 display: grid、grid-template-columns: repeat(3, 1fr) 和 gap 即可完成；图片用 object-fit: cover 防变形，缺图时需显式占位，响应式通过媒体查询调整列数，IE11 需降级 Flexbox。
用 CSS Grid 实现九宫格图片布局最直接
不用 JavaScript，纯 HTML + CSS 就能稳稳撑起 3×3 图片网格，display: grid 是目前最干净、可控性最强的方式。Flexbox 虽然也能凑出九宫格，但对齐和等距控制容易出偏差，尤其当图片尺寸不一致时。
关键点在于容器设置 grid-template-columns 和 gap，子项不需要额外样式（除非你想统一宽高比）：
<div class="grid-3x3"> <img src="1.jpg" alt=""> <img src="2.jpg" alt=""> <!-- 共 9 张 --> </div>
.grid-3x3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px; /* 行列间距 */
}-
repeat(3, 1fr)比写1fr 1fr 1fr更安全，避免因空格或换行导致解析失败 - 如果图片原始宽高比差异大，加
img { width: 100%; height: 100%; object-fit: cover; }防止拉伸变形 - 别给
img设固定width/height，否则在响应式下会破坏网格流
图片数量不足 9 张时如何保持结构完整
实际业务中常遇到只有 5 或 7 张图的情况，Grid 默认不会自动补空位，视觉上会塌陷成“缺角”——这不是 bug，是预期行为。要维持 3×3 框架，必须显式占位。
- 服务端或 JS 渲染时，补足
<div class="placeholder"></div>即可，CSS 中给 placeholder 设visibility: hidden或background: transparent - 纯 CSS 方案有限：可用
::after伪元素 +content: ""，但只适用于固定数量缺口，且无法响应动态变化 - 千万别用
grid-auto-flow: dense试图“填空”，它会打乱 DOM 顺序，语义和可访问性受损
响应式断点下退化为单列或双列
移动端窄屏硬撑 3 列会导致图片过小、文字被挤，必须做断点处理。核心是改 grid-template-columns，而不是删节点或 JS 重排。
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.grid-3x3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.grid-3x3 {
grid-template-columns: 1fr;
}
}- 用
minmax()可以更灵活：repeat(auto-fit, minmax(200px, 1fr)))，但要注意 Safari 旧版本兼容性 - 避免在媒体查询里重复写
gap，它本身是响应式的，只需设一次 - 如果用了
object-fit: cover，记得在小屏下检查裁剪区域是否切掉关键内容
IE11 兼容需求下只能降级用 Flexbox
IE11 不支持 grid-template-columns 的 repeat() 和大部分函数语法，必须手动写三列，且无法真正等分布局。
.grid-3x3-ie {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.grid-3x3-ie > * {
-ms-flex: 0 0 calc(33.333% - 12px); /* 手动减去 gap */
flex: 0 0 calc(33.333% - 12px);
margin: 6px;
}- IE 中
calc()里不能混用单位（如33.333% - 8px合法，但33.333% - 0.5rem会失效） - gap 没有原生支持，只能靠
margin模拟，但首行/末行/首列/末列会多出空白，需额外清除 - 若项目已放弃 IE 支持，别花时间写这套降级代码——现代 Grid 的简洁性和维护成本优势太明显
Grid 布局的坑主要在细节控制：gap 是否包含边框、object-fit 在不同设备上的渲染差异、以及图片加载前的占位高度塌陷。这些没法靠一套 CSS 一劳永逸，得结合具体图片来源和容器约束来调。
