grid-gap 为什么对图片马赛克没反应？
因为 grid-gap 只作用于 grid 容器的直接子元素之间，如果你把 <img alt="CSS如何实现带间隙的图片马赛克效果_利用grid-gap与object-fit配合css" > 直接塞进 display: grid 容器却没设 grid-template-columns/rows，浏览器可能按单列流式渲染，间隙就“看不见”。更常见的是：图片被拉伸变形后撑满单元格，间隙被视觉上“吞掉”了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须显式定义网格结构，比如
grid-template-columns: repeat(3, 1fr) - 给
<img alt="CSS如何实现带间隙的图片马赛克效果_利用grid-gap与object-fit配合css" >加object-fit: cover或object-fit: fill，否则默认object-fit: fill会失真，而object-fit: contain留白又破坏马赛克感 - 间隙值别太小，
grid-gap: 2px在高 DPR 屏上可能糊成一片，建议从4px起调
object-fit: cover 和 fill 在马赛克里差在哪？
差别在裁剪逻辑——这直接影响马赛克的“块感”是否整齐。用 fill 会强制拉伸图片填满单元格，扭曲原图比例；用 cover 则等比缩放+居中裁剪，保证每张图的视觉焦点都在中心，拼起来才像真正的马赛克块。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
object-fit: cover，并配width: 100%; height: 100%，让图片真正响应单元格尺寸 - 避免给
<img alt="CSS如何实现带间隙的图片马赛克效果_利用grid-gap与object-fit配合css" >设固定宽高（如width: 200px），否则会覆盖 grid 的弹性布局 - 如果原图比例差异极大（比如有竖图有横图），
cover必然裁剪不同区域，这是正常现象，不是 bug
图片马赛克在 Safari 上间隙消失？
老版本 Safari（≤15.4）对 grid-gap 在某些嵌套或 flex 混用场景下兼容性差，但更大概率是它把 <img alt="CSS如何实现带间隙的图片马赛克效果_利用grid-gap与object-fit配合css" > 当作替换元素，默认带 vertical-align: baseline，导致行内基线对齐引发间隙错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给所有
<img alt="CSS如何实现带间隙的图片马赛克效果_利用grid-gap与object-fit配合css" >加vertical-align: top或vertical-align: middle - 避免父容器同时设
display: grid和align-items: center，Safari 对齐计算容易出偏差 - 不用
gap简写（如gap: 4px），改用明确的row-gap: 4px; column-gap: 4px，兼容性更稳
怎么让马赛克响应式缩放还不糊？
核心矛盾是：grid 单元格缩放时，图片若靠 src 原图拉伸，必然模糊；但换 srcset 又得预设多套尺寸，麻烦。真正轻量的解法是用 CSS 控制渲染质量 + 合理限制缩放范围。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加
image-rendering: -webkit-optimize-contrast（Chrome/Safari）和image-rendering: crisp-edges（Firefox），抑制插值模糊 - 用
max-width限制容器宽度，比如max-width: 600px，避免在大屏上无意义拉伸 - 不依赖
vw直接设图片宽高，改用grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))，让列数自适应
最易忽略的是：图片加载完成前，<img alt="CSS如何实现带间隙的图片马赛克效果_利用grid-gap与object-fit配合css" > 高度为 0，grid 容器塌陷，grid-gap 就没空间可作用。务必给 <img alt="CSS如何实现带间隙的图片马赛克效果_利用grid-gap与object-fit配合css" > 设个 min-height 或用 aspect-ratio 占位。
