fr单位仅等分列宽，不控制高度；实现等宽等比需为每个网格项设置aspect-ratio或padding-top hack，并结合auto-fit与minmax实现响应式。
grid-template-columns 用 fr 单位等分列宽，但不控制长宽比
fr 单位只管列宽分配，不管高度。写 grid-template-columns: repeat(3, 1fr) 能让三列等宽，但每列高度完全由内容决定——文字多就高，图片大就高，根本不会“保持长宽比”。想靠它直接实现等宽+等比，行不通。
用 aspect-ratio 配合 minmax() 控制单个网格项的长宽比
真正起作用的是子项自身的 aspect-ratio，不是容器的 grid 属性。必须给每个网格项（比如卡片、图片容器）单独设这个值，否则列宽再均等，高度还是参差不齐。
-
aspect-ratio: 4 / 3是最常用写法，浏览器原生支持（Chrome 88+/Firefox 89+/Safari 15.4+） - 如果要兼容旧浏览器，得用 padding-top hack：设
position: relative+padding-top: 75%（对应 4:3），再用绝对定位包裹内容 - 别在 grid 容器上设
aspect-ratio——它只对块级元素生效，且会把整个容器当成一个整体缩放，破坏列结构
结合 repeat(auto-fit, minmax()) 实现响应式等比列
动态列数 + 等比子项才是实用组合。关键在于把尺寸约束放在子项上，而不是轨道上：
- 容器写
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，负责列数自适应 - 每个子项加
aspect-ratio: 16 / 9和width: 100%，确保填满所在列并维持比例 - 如果子项里有图片，记得设
img { width: 100%; height: 100%; object-fit: cover; }，不然拉伸变形 - gap 不影响
aspect-ratio计算，但会影响实际可用宽度——所以 minmax 的最小值（如 250px）应大于 gap 总和的一半，避免窄屏下单列被压扁
IE 和 Safari 15.3 及更早版本不支持 aspect-ratio
这些环境里，aspect-ratio 直接被忽略，子项退化为内容撑开的高度。如果你的项目仍需支持它们，就得放弃纯 CSS 方案：
立即学习“前端免费学习笔记（深入）”；
- 用 JS 监听容器宽度变化，动态计算并设置子项
style.height - 或改用伪元素 padding-top hack，并确保子项内容用
position: absolute覆盖其上 - 注意：Grid 的
minmax()和auto-fit在 IE 中也不可用，必须降级为媒体查询 + 固定列数
真正难的不是让列等宽，而是让每个格子在不同尺寸下都稳住比例——这取决于子项是否可控，而不是 Grid 容器写得多漂亮。
