九宫格布局应使用CSS Grid,设三列等宽并配合gap控制间距;图片需用object-fit: cover统一裁剪,并确保父容器有高度或aspect-ratio;响应式需在断点中显式重置grid-template-columns;项数不足时应在渲染层补足9项,而非依赖Grid自动补齐。

用 grid-template-columns 直接定义三列等宽布局
九宫格本质是 3×3 的二维排列,Grid 最自然的解法就是设为 3 列、自动换行。关键不是“拼图”效果,而是让容器按行列均匀分配子项:
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}这里 repeat(3, 1fr) 比写 1fr 1fr 1fr 更安全,避免因空格或换行引发解析异常;gap 控制间距,别用 margin —— 子项 margin 在 Grid 中行为不可靠,且易导致首尾留白不均。
图片尺寸不一致时用 object-fit 统一裁剪
相册图常有横图、竖图、正方图混排,直接设 width: 100% 会拉伸变形。必须配合 object-fit: cover 和固定容器高宽:
.gallery img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}注意:父容器(即每个 grid item)需设高度,否则 height: 100% 无效。常见做法是给 .gallery > * 设 aspect-ratio: 1/1(现代浏览器支持),或用 padding-top: 100% + position: relative + position: absolute 做兼容方案。
响应式断点下改列数要重置 grid-template-columns
手机屏上 3 列太挤,通常改成 2 列或 1 列。不能只改 gap 或图片尺寸,必须显式覆盖列定义:
@media (max-width: 768px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.gallery {
grid-template-columns: 1fr;
}
}漏掉这条,就会出现“列数没变但图片被压缩成窄条”的典型错误。另外,repeat(auto-fit, minmax(...)) 虽灵活,但在严格九宫格场景反而难控总数,建议优先用固定列数 + 媒体查询。
Grid 项数量不足 9 个时留白处理要小心
如果只有 5 张图,Grid 默认不会补空白项,布局会塌成前两行加一个孤零零的第三行首项。解决方式分两种:
- 后端或 JS 补够 9 个
<img>,空位用占位图或透明<div> - CSS 侧用
grid-auto-rows: 0+::after伪元素补格子(但伪元素无法响应图片加载,慎用)



















