aspect-ratio在grid中是“触发器”而非“保险丝”，仅当子项宽度可推导、无显式height、父容器未用grid-template-rows/grid-auto-rows锁死行高、且内部元素未破坏盒模型时才生效；否则被静默忽略，导致排版崩塌。
aspect-ratio 在 CSS Grid 中不是“保险丝”，而是“触发器”——它只在满足特定条件时参与尺寸计算，否则会被浏览器静默忽略，甚至引发排版崩塌。根本原因不是属性本身有问题，而是它和 Grid 的隐式尺寸逻辑发生了冲突。
Grid 容器没给子项留出宽度推导空间
浏览器需要先知道子项的宽度，才能用 aspect-ratio 算出高度。但 Grid 默认不强制子项有明确宽度：
- 父容器没设
width、max-width或弹性轨道（如grid-template-columns: 1fr），子项可能靠内容撑开，宽度不可测 - 子项是
display: contents或写了min-width: unset，导致盒模型塌陷 - 父容器在 Flex 嵌套中，且未加
min-width: 0，触发 flex item 的最小宽度保护机制，阻断比例推导
子项同时声明了 height 和 aspect-ratio
height 属性优先级高于 aspect-ratio，只要显式写了 height: 200px、height: auto 甚至 max-height: none，浏览器就放弃比例计算，直接按固定/自动高度渲染——此时卡片可能突然收缩或撑开，造成视觉跳动。
- 常见误写：
height: 100%（上级若无明确高度，它等价于height: auto） - 隐藏陷阱：
min-height: 200px+aspect-ratio: 4/3→ 若内容本该更矮，min-height会压过比例结果 - Flex/Grid 混合布局中，
align-items: stretch（默认值）会强行拉高子项，覆盖aspect-ratio推出的高度
grid-auto-rows 或 grid-template-rows 写法压制了比例生效
这两个属性和 aspect-ratio 是竞争关系。Grid 轨道一旦被显式定义，就会接管行高控制权，子项的 aspect-ratio 失去作用域。
-
grid-template-rows: 1fr 1fr→ 强制两行等高，不管卡片内容或比例 -
grid-auto-rows: 300px→ 固定行高，直接覆盖比例推导 -
grid-auto-rows: minmax(200px, max-content)→ 下限 200px 可能比aspect-ratio算出的高度还大，导致卡片“被抬高” - 正确写法：
grid-auto-rows: minmax(0, max-content)，允许aspect-ratio自由推导，同时防止内容塌缩
图片或内部元素破坏了比例容器的渲染盒
aspect-ratio 只约束外层容器的宽高比，但若内部 img 没配 width: 100% 和 height: 100%，或者用了 position: absolute、float，实际内容高度就和容器脱钩——你看到的“崩塌”，其实是容器按比例撑开了，但内容没填满，留下大片空白或错位。
- 直接给
<img>加aspect-ratio无效（替换元素不支持，浏览器静默忽略） -
img是 inline 元素，默认底部有基线间隙，必须加display: block - 卡片内用了
flex: 1的标题或描述区，但没配min-height: 0，触发 flex item 最小高度限制，撑破比例框 - 伪元素或绝对定位浮层脱离文档流，不参与高度计算，使
aspect-ratio的“内容高度”失真
<slot></slot> 容器、CSS-in-JS 的 scoped style，上级很可能已设 height: 100% 或 flex: 1，这时光写 aspect-ratio 没用，得一层层 inspect 盒模型，清掉所有 height、max-height、flex-shrink: 0 等干扰项。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
