应使用 auto-fit 而非 auto-fill，因 auto-fit 会收缩并丢弃无法容纳整列的空间，使列数随容器宽度自然增减；auto-fill 则强行填满整行，易导致小屏下图片被压缩。
grid-template-columns 用 auto-fit 还是 auto-fill？
绝大多数人写错的第一步就是选错重复模式。auto-fill 会强行填满整行，哪怕后面全是空列；auto-fit 才会真正“收缩并丢弃”无法容纳整列的空间，让列数随容器宽度自然增减。
常见错误：repeat(auto-fill, minmax(300px, 1fr))) —— 小屏下可能撑出 4 列但每列只有 120px，图片被严重压缩。
正确写法：repeat(auto-fit, minmax(300px, 1fr)))，配合容器 width: 100% 或 max-width（否则 Grid 没有参照宽度，minmax() 不生效）。
实操建议：
- 300px 是单图最小可读宽度（含
gap后的净宽），可根据画廊用途下调至 240px（小屏）或上提至 360px（高清展示） - 不用设
grid-auto-flow: column——auto-fit默认按行填充，语义和 DOM 顺序一致 - 避免写
minmax(200px, 1fr)：这会让单列拉伸占满剩余空间，彻底失去多列能力
图片变形、模糊、留白大的根本原因在哪？
Grid 只管布局，不管图片怎么显示。所有“压扁”“拉伸”“上下大片空白”，问题都在 <img> 元素自身，不是 Grid 的锅。
直接对 <img> 设 height 是最常踩的坑：不同 DPR 设备下像素断裂，且破坏响应性。
实操建议：
- 给每张图套一层
<div> 容器，设 <code>aspect-ratio: 4/3（或你业务需要的比例） -
<img>写width: 100%; height: 100%; object-fit: cover; - 禁用
background-image模拟——语义丢失、SEO 和屏幕阅读器不可见 - 不设
img的width和height属性（HTML 中的 width/height 属性会强制固宽高比，与 CSS 冲突） - 改用
gap: clamp(0.5rem, 2vw, 1rem)—— 浏览器自动在最小值、视口相对值、最大值间平滑过渡 - 小屏（
max-width: 480px）同步降级minmax()下限：从300px改为240px，避免单列过窄 - Safari 15.4+ 才完整支持
clamp()，旧版 Safari 降级写gap: 0.75rem即可，无需 JS 补丁 - 别用 JS 检测屏幕尺寸切换 class——CSS 原生能力已足够覆盖全部响应逻辑
- 仅当图集无语义顺序（如纯装饰图）、且你手动控制大图跨列（
grid-column: span 2）时，才考虑dense - 用
row时，若遇大图导致下方留白，优先检查是否漏了aspect-ratio容器约束，而不是换 flow 模式 -
minmax(0, 1fr)不是万能解药——它可能导致行高塌陷，需搭配grid-auto-rows或显式高度
小屏间距挤成一团，media query 为什么不管用？
固定 gap: 1rem 在小屏上占比飙升，视觉压迫感强。单纯用 @media (max-width: 480px) 改成 gap: 0.5rem 仍属硬编码，缩放时体验断层。
实操建议：
grid-auto-flow: dense 能解决错位吗？
不能。dense 只是让小图回填前面空隙，但它不修复图片原始宽高比不一致导致的网格线错位，反而打乱 DOM 顺序，影响键盘导航、屏幕阅读器和 SEO。
多数真实场景应坚持 grid-auto-flow: row（默认值），靠 aspect-ratio + object-fit 统一容器比例，而非靠 dense “掩盖”问题。
实操建议：
object-fit、aspect-ratio、clamp）混为一谈。每个模块只做一件事，边界清晰了，响应式画廊就不再是个黑盒。
