九宫格布局应使用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伪元素补格子（但伪元素无法响应图片加载，慎用）
