用 css grid 的 repeat(auto-fit, minmax(280px, 1fr))) 实现响应式九宫格，配合 gap、aspect-ratio 和 srcset，确保图片不拉伸、不留白、自适应行列数，现代浏览器原生支持，ie11 应降级为媒体查询+flex 布局。
用 grid 布局实现九宫格，别碰 float 或 inline-block
响应式九宫格图片布局，核心是让 3×3 网格在不同屏幕下自动适配——不是靠 JS 计算列数，也不是靠媒体查询硬切断点，而是用 CSS Grid 的 repeat(auto-fit, minmax(...)) 模式。它能根据容器宽度动态决定每行几列，同时保证图片不拉伸、不溢出。
常见错误是写死 grid-template-columns: repeat(3, 1fr)，结果小屏上图片被压扁或横向滚动；或者用 flex-wrap 配合固定 flex-basis，但无法精准控制行列数和间隙一致性。
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))—— 最小宽度设为图片可读的临界值（如 280px），浏览器会尽可能塞满 3 列，窄屏自动退化为 2 列或 1 列 - 给容器加
gap: 8px控制间距，比用margin更干净，不会触发外边距合并或父容器溢出 - 所有图片必须设
width: 100%; height: auto;，否则在grid中可能保留原始尺寸导致错位
图片加载前留白防布局抖动，用 aspect-ratio 固定宽高比
九宫格最烦的是图片加载中时高度塌陷，下面的图往上跳——尤其在慢网或懒加载场景。单纯设 height: 200px 会破坏响应式，而 object-fit: cover 不解决留白问题。
现代方案是直接用 aspect-ratio: 1 / 1（正方形图片）或 4 / 3，配合 img 的 width: 100%，浏览器会在加载前就预留正确空间。
- 支持度：Chrome 88+、Firefox 89+、Safari 15.4+，旧版 Safari 可用
padding-top: 100%+ 绝对定位降级（但仅当必须兼容 iOS 15.3 及更早） - 不要对
img设min-height，它会和aspect-ratio冲突，导致空白区域异常放大 - 如果后端返回的图比例不统一，用
object-fit: cover裁剪，但需确认设计允许关键内容被裁掉
响应式图片源适配：用 srcset + sizes 配合 Grid 容器宽度
Grid 容器的宽度是动态的，所以 sizes 不能写死 (max-width: 768px) 100vw 这种全局断点。得根据网格实际占用宽度来告诉浏览器：“这张图在当前容器里大概占多宽”。
- 假设网格间隙共 2 个
gap（即 16px），3 列，则每张图宽度 ≈(100vw - 16px) / 3；sizes可写成sizes="(min-width: 640px) calc((100vw - 16px) / 3), 100vw" -
srcset按物理像素提供多档：如photo-320w.jpg 320w, photo-640w.jpg 640w, photo-960w.jpg 960w - 别漏掉
alt和loading="lazy"，否则 Lighthouse 会报可访问性和性能分低
IE11 兼容？别费劲了，用 display: flex 降级要重写逻辑
IE11 不支持 grid 的 auto-fit 和 minmax()，强行用 -ms-grid 模拟会导致代码臃肿、维护困难，且无法真正响应式（只能靠媒体查询切三套布局）。
如果项目明确要求支持 IE11，不如直接放弃“动态列数”，改用固定 3 列 + 媒体查询降级为 2 列/1 列，并用 flex-wrap + flex-basis 实现。但注意：
-
flex-basis: calc((100% - 2 * 8px) / 3)中的8px是 gap 值，必须和 CSS 里的gap保持一致，否则错位 - IE11 下
object-fit完全不支持，得用背景图 +background-size: cover替代img标签 - 这种降级方案会让同一份 HTML 在不同浏览器渲染逻辑完全不同，测试成本翻倍
现在绝大多数业务已不再要求 IE11 支持，真遇到，优先推动产品侧明确兼容范围，而不是在代码里堆补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
