aspect-ratio 不控制卡片高度，仅约束单个子项宽高比；需确保父容器有宽度上下文、避免与 height 冲突、内部元素不破坏比例继承、grid-auto-rows 设为 minmax(0, max-content)，且 aspect-ratio 必须加在 grid 直接子项上。
aspect-ratio 本身不控制卡片高度，只约束单个子项的宽高比
很多人以为给 .card 加了 aspect-ratio: 4/3 就能“强制等高”，其实它只保证这张卡片自己的内容盒维持 4:3 比例，**完全不管其他卡片有多高**。Grid 容器仍按默认规则分配行高——如果没设 grid-auto-rows 或 grid-template-rows，每张卡片各行高度由自身内容决定，结果就是：有的卡文字少+图片小，高度 200px；有的卡三段文字+大图，高度 320px。
父容器没设高度上下文，aspect-ratio 失去拉伸基准
aspect-ratio 要生效，得有可计算的宽度来源。但在 Grid 中，若父容器宽度靠内容撑开（比如没设 width、max-width 或 min-width），浏览器可能无法推导出子项宽度，进而跳过比例计算——此时你看到的“没效果”，其实是 aspect-ratio 根本没触发。
- 检查父容器是否至少有
min-width: 0（尤其在flex嵌套 Grid 时） - 确认列定义用了可变轨道，例如
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，而不是固定值如200px 200px - 避免在卡片上同时写
height: 300px和aspect-ratio——height会直接覆盖比例逻辑
卡片内部结构破坏了比例继承
即使外层 .card 有 aspect-ratio，只要内部存在以下任一情况，实际渲染高度仍会浮动：
-
img元素没设width: 100%和height: 100%，导致它不占满父容器，aspect-ratio的“容器”实际变小 - 标题或段落用了
min-height、height或flex: 1却没配min-height: 0，触发 flex item 最小高度限制，撑破比例框 - 卡片内用了
position: absolute的元素（如浮层按钮），脱离文档流，不参与高度计算，使aspect-ratio的“内容高度”失真 - 文字行数差异大，且没做截断（如没用
-webkit-line-clamp），导致描述区高度弹性过大
grid-auto-rows 或 grid-template-rows 写法冲突
这两个属性和 aspect-ratio 是竞争关系。常见错误写法：
-
grid-auto-rows: 250px—— 固定行高直接覆盖aspect-ratio推导出的高度 -
grid-template-rows: 1fr 1fr—— 显式定义两行，但卡片跨行或数量不匹配时，aspect-ratio无作用域 -
grid-auto-rows: minmax(200px, max-content)—— 下限 200px 可能压过比例计算结果，尤其当内容本该更矮时
真正兼容 aspect-ratio 的写法是：grid-auto-rows: minmax(0, max-content)（注意是 0，不是 auto），再配合卡片上 min-height: 0 防止 flex 子项干扰。
最常被忽略的一点：aspect-ratio 生效的前提是卡片必须作为 Grid 直接子项。如果你在卡片里又套了一层 div 并把 aspect-ratio 错加在那层上，Grid 容器根本看不到这个约束——它只认第一层子元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
