index.html怎样实现响应式的图片网格布局？

最稳方案是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，配合aspect-ratio防抖动、object-fit保比例、gap控间距；auto-fit收空列，auto-fill留空位；须设图片宽高属性防CLS。

用 CSS Grid 实现响应式图片网格，比 Flexbox 更直接、更可控——尤其当你要保证列数弹性变化、图片等高、间距不塌陷时，grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 是最稳的起点。

为什么不用 float 或 inline-block？

它们无法自动处理高度不一致的图片导致的“错行”，也不支持 gap 控制项间距离。浮动需清浮，inline-block 会因 HTML 空格产生不可控间隙，且无法对齐底部内容。现代项目里，这些方案只在兼容 IE10 以下时才被动启用。

auto-fit 和 auto-fill 的区别必须分清

两者都用于 repeat() 内部，但行为不同：

• auto-fit：会把空列“收掉”，剩余空间均分给有内容的列（推荐）
• auto-fill：强行填满整行，哪怕某些列是空的，容易导致最后一行只剩一张图还撑满宽度

实际写法应为：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))；其中 280px 是单列最小宽度，低于该值就自动折为单列。

立即学习“前端免费学习笔记（深入）”；

图片容器必须设 aspect-ratio 或 padding-top 防抖动

直接写 <img width="100%" height="auto"> 会导致加载时布局跳动（CLS），尤其在慢网下明显。正确做法是：

• 现代浏览器：给 .grid-item 设 aspect-ratio: 4/3 + img { width: 100%; height: 100%; object-fit: cover; }
• 兼容旧版：用 padding-top: 75% + position: relative + img { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
• 所有 <img> 标签必须带 width 和 height 属性（哪怕只是占位值），否则 SSR 或预渲染时无法预留空间

别忽略 gap 和 overflow 的冲突

gap 是网格专用间距，它不会被父容器的 overflow: hidden 剪裁，而 margin 会。但如果你给网格容器加了 border-radius 并同时设 overflow: hidden，又用了 gap，某些 Safari 版本（如 iOS 15.4）会出现圆角内 gap 不生效的问题。此时可改用 padding 替代部分 gap，或加一层 wrapper。