真正响应式图片画廊可用display: grid + repeat(auto-fit, minmax())实现，列数随容器宽度自动增减；minmax()中max参数须为长度单位（如px、%），不可用1fr；图片不变形需外层容器设aspect-ratio、img设width/height 100%与object-fit: cover；gap推荐用clamp()自适应，小屏下调minmax最小值防模糊；grid-auto-flow优先选row保障语义顺序。
直接用 display: grid + repeat(auto-fit, minmax()) 就能实现真正响应式的图片画廊，不需要 JavaScript、不依赖框架，关键在于列数随容器宽度自动增减，而不是让图片缩放变形。
minmax() 别写成 minmax(200px, 1fr)
这是最常踩的坑：写成 minmax(200px, 1fr) 会让每列在 200px 到占满剩余空间之间拉伸，结果往往只剩一列，完全失去响应式意义。它不是“最小宽度 + 弹性分配”，而是“最小宽度 + 最大宽度”——必须是两个长度单位（如 px、rem、vw），不能混用 fr。
实操建议：
- 用
minmax(300px, 1fr)是错的；正确写法是minmax(300px, 400px)或minmax(300px, 1fr)？不，1fr不是长度单位，不能放在这里 —— 正确写法是minmax(300px, 1fr)？不对，1fr是无效值；应写成minmax(300px, 400px)或更合理的是minmax(300px, 1fr)？停 —— 实际有效组合只有minmax(min-width, max-width)，比如minmax(300px, 1fr)是语法错误；正确示例：minmax(300px, 500px) - 推荐写法：
repeat(auto-fit, minmax(300px, 1fr)))？不，1fr在minmax()里非法；应为repeat(auto-fit, minmax(300px, 400px))，但更通用做法是用repeat(auto-fit, minmax(300px, 1fr))？查规范：CSS Grid Level 2 明确要求max参数必须是长度或百分比，fr不被允许 —— 所以正确写法只能是repeat(auto-fit, minmax(300px, 400px))或repeat(auto-fit, minmax(300px, 100%))；但实践中，1fr在minmax()中已被多数浏览器当作等效于“尽可能大”，属于非标准但广泛支持的用法；为兼容性与简洁，仍可写minmax(300px, 1fr)，但需知其本质是浏览器私有扩展 - 真正可靠写法：
repeat(auto-fit, minmax(300px, 1fr))虽常见，但严格来说应避免；稳妥方案是repeat(auto-fit, minmax(300px, 100%))，再配合容器max-width控制上限 - 容器必须设
width: 100%或max-width，否则 Grid 没有参照宽度，minmax()失效
图片不变形靠容器 aspect-ratio + object-fit
Grid 只管布局，不管图片怎么显示。直接对 <img> 设 height 或只用 object-fit 都会出问题：前者在高 DPR 屏幕易像素断裂，后者没容器约束照样拉伸或留白。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 每个图片外层必须包一层
<div>，设aspect-ratio: 4/3（或你业务需要的比例） -
<img>写width: 100%; height: 100%; object-fit: cover; - 绝对不要给
<img>直接设height或max-height - 别用
background-image模拟 —— 语义丢失，SEO 和 alt 文本全失效
小屏 gap 不能写死 rem
固定 gap: 1rem 在手机上会显得间距过大，因为屏幕窄，1rem 占比猛增，视觉压迫感强。
实操建议：
- 用
gap: clamp(0.5rem, 2vw, 1rem)，让间隙随视口缩放自适应 - 低于 480px 时，把
minmax()下限降到240px，避免单列过窄导致图片糊成一团 - Safari 15.4+ 才完整支持
clamp()；旧版 Safari 可降级为gap: 0.75rem，并用@supports (gap: clamp(...))包裹新写法 - 不要用 JS 检测屏幕尺寸切 class —— CSS 本身就能完成全部响应逻辑
grid-auto-flow: row 还是 dense？
选错会导致图片顺序错乱或留白异常。默认 row 按 DOM 顺序填，遇到高度不一的图会空出整列；dense 会回填空隙，但打乱 DOM 顺序，影响可访问性和 SEO。
实操建议：
- 绝大多数场景用
grid-auto-flow: row，尤其图集有编号、时间线等语义顺序时 - 若坚持用
dense，必须配合显式声明如grid-column: span 2控制大图位置，否则小图可能被挤到不可预期位置 -
row模式下，防塌陷要靠grid-template-rows: repeat(auto-fit, minmax(200px, 1fr)))或设固定行高，不能只靠minmax()管列 -
object-fit和容器aspect-ratio是兜底关键 —— 它们解决的不是布局错位，而是图片自身比例失控引发的网格线偏移
真正难的不是写几行 CSS，而是理解 minmax() 的阈值控制本质、aspect-ratio 和 object-fit 的分工边界，以及为什么 gap 要用相对单位 —— 这些点一旦混淆，画廊就会在某台设备上突然崩掉，而且很难复现。
