真正起作用的是 aspect-ratio + 弹性轨道 + 内容约束三者协同；仅用 grid-template-columns 或 fr 无法实现自动等比例缩放，因它们不控制宽高比。
不能靠 grid-template-columns 或 fr 单独实现自动等比例缩放——它们只分配空间，不控制宽高比。真正起作用的是 aspect-ratio + 弹性轨道 + 内容约束三者协同。
为什么直接写 1fr 1fr 不等于等比例缩放
1fr 分配的是“剩余空间”，不是容器总宽；它不管高度，也不管内容原始比例。即使两列等宽，若内部图片是 4:3 和 16:9，视觉上依然参差不齐。
- 常见错误：给网格项设了
height: 200px，直接覆盖aspect-ratio计算逻辑 - 更隐蔽的问题：父容器用了
display: contents或网格项是inline级元素，aspect-ratio在 Firefox/Safari 中完全失效 - 检查方式：打开开发者工具，选中网格项，在 “Computed” 面板里确认
aspect-ratio是否被解析为有效值（如1 / 1），而非auto
aspect-ratio 必须设在网格项上，且要配合 minmax(0, 1fr)
只写 aspect-ratio: 1 / 1 不够——如果行高由内容撑开，整行仍会高低不一。必须让行轨道也“听话”：
- 网格容器加
grid-auto-rows: minmax(0, 1fr)（不是1fr）：minmax(0, 1fr)强制忽略内容最小尺寸，让行高严格按比例切分 -
minmax(0, 1fr)在 Safari 14.1+ 才稳定，旧版需 fallback 到padding-bottomhack - 别用
grid-template-rows: repeat(3, 1fr)代替——它只保证三行等高，不保证每行内格子等比；且一旦内容溢出，1fr就会退化为auto
图片内容必须用 object-fit + width/height: 100% 对齐语义
aspect-ratio 控制容器比例，object-fit 控制内容如何适配这个容器。两者缺一不可：
-
img元素必须设width: 100%; height: 100%，否则object-fit不生效 -
object-fit: cover适合封面图——等比缩放后裁剪边缘；object-fit: contain适合图标/示意图——等比缩放后留白 - 避免对
img设max-height同时又写height: auto，这会破坏100%基准，导致比例错乱 - 如果网格项有
gap或padding，实际可渲染区域变小，缩放基准就偏移了——调试时先临时关掉gap看效果
响应式列数变化时，auto-fit 比 auto-fill 更可靠
想让小屏下 2 列、中屏 3 列、大屏 4 列自动切换？关键不在媒体查询，而在轨道定义：
- 用
repeat(auto-fit, minmax(280px, 1fr))：空列被收掉，有内容的列均分容器宽度，视觉节奏一致 - 别用
repeat(auto-fill, minmax(280px, 1fr))：窄屏下可能留下半截空白列，破坏等比感 -
minmax(280px, 1fr)中的280px是底线，不是固定值——太小（如100px）会让图片糊成色块；太大（如400px）会导致小屏只剩一列 - iOS Safari 12–13 对
auto-fit支持不稳定，真要兼容，得用@container查询兜底，而非媒体查询
最易被忽略的一点：所有网格项必须统一 box-sizing: border-box，且不能有意外的 min-width 或未约束的长文本——这些都会干扰 minmax() 的计算，让“等比”变成“看起来差不多”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
