1fr在minmax()中是弹性上限而非等分，表示轨道最大宽度；实际列数由容器宽度和300px最小宽度共同决定，需确保容器有明确宽度、图片不破坏比例、子项不干扰grid计算。

直接用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 就能实现列数随容器宽度自动增减，但前提是图片本身不破坏比例、容器有明确宽度，且没被子项样式悄悄“关掉”响应逻辑。

为什么 minmax(300px, 1fr) 里的 1fr 不是“等分”，而是“弹性上限占位符”

很多人写对了语法却得不到预期效果，根本原因是误解了 1fr 在 minmax() 中的作用。它在这里不是让每列“均分剩余空间”，而是作为该轨道能接受的**最大宽度上限**——浏览器会先确保每列 ≥ 300px，再看还能不能塞下更多列；如果塞不下，就丢弃空轨道，只保留能完整容纳 ≥300px 的列数。

常见错误现象：

• 小屏下仍强行显示 2 列，图片被横向压缩变形
• 中等宽度（比如 650px）只出 1 列，明明能放 2 个 300px

这通常是因为：

• 父容器没设 width 或 max-width，Grid 缺少计算基准
• 图片外层没控制宽高比，导致实际内容高度塌陷，触发 Grid 重排错乱
• 写了 minmax(300px, auto) 或 minmax(300px, max-content)，让列宽失去弹性约束

图片不变形的关键：aspect-ratio + object-fit，别碰 img 的 height

Grid 只管布局，不管图片怎么填满格子。很多画廊一缩放就模糊、压扁、留白过大，问题全在 <img> 自身。

实操建议：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 给每张图包一层 <div>，设 <code>aspect-ratio: 4/3（或你图片的实际比例）
• <img> 设 width: 100%; height: 100%; object-fit: cover;
• 绝对不要给 <img> 直接设 height 像素值，否则在高 DPR 设备上容易出现像素断裂
• 避免用 background-image 模拟——语义丢失，SEO 和可访问性受损

gap 不能写死，小屏下要用 clamp() 动态缩放

固定 gap: 1rem 在小屏上会占比过大，视觉压迫感强，甚至挤占图片有效宽度。

实操建议：

• 用 gap: clamp(0.5rem, 2vw, 1rem) 替代固定值，让间距随视口缩放自然调节
• 小于 480px 时，把 minmax() 下限降到 minmax(240px, 1fr)，避免单列过窄影响可读性
• 别用 JS 检测屏幕尺寸来切 class——CSS 本身就能完成所有响应逻辑
• Safari 15.4+ 才完整支持 clamp()，旧版 Safari 可降级为 gap: 0.75rem

子项样式会悄悄让 auto-fit 失效

即使 grid-template-columns 写得完全正确，只要子项加了某些样式，Grid 就可能“放弃计算”，退化成普通块级流。

容易踩的坑：

• 子项设了 width: 200px 或 flex: 0 0 200px：强行撑开列宽，换行错乱
• 子项用了 float、position: absolute，或包裹在 display: flex 容器里：Grid 轨道计算中断
• 子项内文字过长未处理：white-space: nowrap 默认不折行，可能撑破最小宽度限制
• 嵌套网格时，中间夹了一层 div + display: flex：子网格找不到 Grid 父容器

真正难的不是写出那行 repeat(auto-fit, minmax(...))，而是确认整个渲染链路里没有一个地方偷偷把 Grid 的响应式计算“掐断”。