aspect-ratio必须作用于grid-item而非Grid容器，因其仅对直接子元素生效；常见失效原因包括子项显式声明宽高、父容器固定行高、未设width:100%及列定义锁死宽度。
aspect-ratio 必须作用在 grid-item 上，不是容器
很多人把 aspect-ratio: 16/9 写在 .grid 容器上，结果完全没效果——这个属性只对网格项（即直接子元素）生效。Grid 容器本身不参与宽高比计算，它只负责划分轨道。
常见错误现象：aspect-ratio 在开发者工具里显示“已应用”，但单元格高度始终由内容或行轨道决定，比例纹丝不动。
- 确保目标元素是
display: grid或display: block的直接子项（即 grid-item） - 若子项是
<img>，别直接给它设aspect-ratio——替换元素的固有尺寸优先级更高，该声明会被忽略 - 正确做法：用一个包裹容器（如
<div class="card">）作为 grid-item，再给它设aspect-ratio
宽高比失效的四大典型原因
aspect-ratio 是“后备规则”，浏览器只在没有更强约束时才介入计算。以下任一条件满足，它就直接跳过：
- grid-item 上写了
width、height或min-width（哪怕min-width: 0） - Grid 容器用了
grid-template-rows: 200px或grid-auto-rows: 200px—— 固定行高会覆盖比例计算 - grid-item 没写
width: 100%，导致aspect-ratio缺少宽度基准，无法反推高度 - 列定义用了锁死宽度的写法，如
grid-template-columns: 200px 200px，且未配合弹性行高
列定义与行定义如何配合 aspect-ratio
要让 aspect-ratio 发挥作用，列宽必须可变、行高必须留出计算空间：
立即学习“前端免费学习笔记（深入）”；
- 列推荐写法：
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)))——minmax(0, 1fr)更稳妥，避免内容撑破 - 行必须用
grid-auto-rows: 1fr（不是grid-template-rows），它提供弹性占位，为比例计算提供依据 - 绝对要避免：
grid-template-rows: 1fr 1fr这类显式固定行数写法，它会压制隐式行的弹性行为 - grid-item 自身禁用
height: 100%或min-height——aspect-ratio只在height: auto时起效
兼容旧版 Safari 的 fallback 方案
Safari 15.4 之前版本（如 iOS 15.2）完全不支持 aspect-ratio，降级后表现为自然高度塌陷。必须加兜底：
- 容器设
position: relative+padding-top: 75%（4:3 → 75%，16:9 → 56.25%） - 内容层（如
<img>）设position: absolute+top: 0+left: 0+width: 100%+height: 100% - 关键细节：
grid-item要加min-height: 0防止 flex/grid 布局下 padding-top 失效 - 图片需加
object-fit: cover，否则拉伸变形
真正麻烦的不是写两套样式，而是忘记 min-height: 0 或漏掉 box-sizing: border-box —— 这两个点一旦出错，整个 fallback 区域会塌成一条线。
