直接用 aspect-ratio 配合 Grid 自动列数是最可靠、代码最少的方案；grid-template-columns 仅分配轨道尺寸，无法约束子项宽高比，必须由 aspect-ratio 在容器上声明比例并配合 width:100% 和 object-fit 实现统一缩放。
直接用 aspect-ratio 配合 Grid 自动列数，是目前最可靠、代码最少的方案。旧浏览器兜底才需要 padding-top hack。
为什么不能只靠 grid-template-columns 控制宽高比
Grid 的 grid-template-columns 和 grid-template-rows 只管轨道尺寸分配，不约束子元素自身比例。哪怕你设了 minmax(200px, 1fr)，图片仍可能被拉伸、裁剪错位，或因原始尺寸差异导致网格“高低不平”。
真正起作用的是让每个网格项（或其内部容器）维持固定宽高比，再让内容在里面适配。
-
aspect-ratio: 1 / 1是现代标准，浏览器自动计算高度（或宽度），与 Grid 完全兼容 - 不要给
img直接设height或max-height，会破坏比例逻辑 - 若需兼容 IE 或旧版 Safari（padding-bottom hack，但必须配合
position: relative+absolute子元素
用 aspect-ratio + object-fit 实现整齐画廊
关键不是“让图片缩放”，而是“让容器守比例，再让图片填满”。这样无论原始图是 4:3、16:9 还是 SVG，视觉都统一。
立即学习“前端免费学习笔记（深入）”；
- 给网格项（如
.grid-item）设aspect-ratio: 1 / 1，它就永远是正方形 - 图片设
width: 100%; height: 100%; object-fit: cover;，保证填满且不畸变 - 避免同时设
height: auto—— 它和aspect-ratio冲突，后者优先级更高 - 加
overflow: hidden防止object-fit: cover溢出边框
示例：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.grid-item {
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 6px;
}
.grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
auto-fit 列数和 aspect-ratio 的协同效果
很多人卡在“为什么小屏还是两列？”。问题往往不在 aspect-ratio，而在 minmax() 的最小值没被满足。
- 假设你写
minmax(250px, 1fr)，而容器宽度只有 240px，那连一列都塞不下，auto-fit就会退化为单列，但该列宽度仍是 240px → 此时aspect-ratio: 1/1让它变成 240×240 的正方形，高度陡增 - 如果希望小屏也保持紧凑，把最小值调低（如
180px），或改用clamp(180px, 25vw, 1fr)做更柔性的下限 -
auto-fit会合并空轨道，auto-fill则保留空轨道 —— 画廊场景一律用auto-fit，否则留白难控制
移动端强制单列时 aspect-ratio 依然生效
媒体查询改列数不影响 aspect-ratio，它始终作用于每个网格项本身。所以即使你用 @media (max-width: 480px) { grid-template-columns: 1fr; }，每张图还是正方形，只是垂直堆叠了。
容易被忽略的一点：如果父容器有 max-width 但没设 width: 100%，在某些嵌套布局中，aspect-ratio 计算的基准宽度可能意外变小，导致高度压缩。务必确认网格容器在流式上下文中能正确获取可用宽度。
