Grid 中 aspect-ratio 不生效需先检查父容器是否设 width 或 min-width，再确保子项设 width: 100% 或 min-width: 0，避免 height 冲突，优先用 grid-auto-rows 配合 aspect-ratio 实现响应式高度。
Grid 中 aspect-ratio 不生效？先检查父容器是否设了 width 或 min-width
很多同学给卡片加了 aspect-ratio: 4 / 3，结果在 Grid 里完全没反应——不是 CSS 写错了，而是 Grid 的默认行为会压制它。Grid 容器对子项的尺寸控制优先级高于 aspect-ratio，尤其当子项没有显式宽度时，浏览器可能直接忽略比例约束。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保卡片元素设置了
width: 100%（或min-width: 0），否则 Grid 可能按内容撑开，绕过比例计算 - 避免在卡片上同时设
height和aspect-ratio，两者冲突时height会赢 - 如果用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，记得子项要设min-width: 0，不然minmax()会卡死比例缩放
不同比例卡片混排时，grid-auto-rows 比 grid-template-rows 更灵活
仪表盘里常有 16:9 的图表卡、1:1 的指标卡、4:3 的日志预览卡——硬写 grid-template-rows 会逼你把所有高度写死，一改就崩。而 grid-auto-rows 让每张卡按自己内容+比例自动算高，Grid 只负责“分配列宽”，行高交给卡片自己管。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
grid-auto-rows: minmax(0, max-content)，配合卡片内aspect-ratio，实现真正响应式高度 - 别依赖
grid-row: span 2来拉高卡片——它会让整行被撑高，影响其他卡片布局 - 若需统一最小高度（比如都至少 200px），写成
grid-auto-rows: minmax(200px, max-content)，但注意这会覆盖aspect-ratio的下限
IE11 兼容方案：不用 aspect-ratio，改用 padding-bottom 技巧 + position: relative/absolute
aspect-ratio 在 IE11 和旧版 Safari 完全不支持，但仪表盘又常要兼容。这时候得回归经典 hack：用 padding-bottom 占位，再用绝对定位把内容塞进去。关键点在于，这个技巧和 Grid 并不冲突，只要卡片是 Grid 子项，依然能正常分列。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 卡片外层设
position: relative和padding-bottom: 75%（对应 4:3） - 内容区用
position: absolute; top: 0; left: 0; width: 100%; height: 100% - 必须给卡片设
min-width: 0，否则 Grid 在 IE 下可能忽略 padding 占位 - 别忘了给内容区加
box-sizing: border-box，避免 padding 和 border 叠加出界
React/Vue 中动态卡片比例失效？检查 key 和组件复用逻辑
在框架里渲染一堆卡片时，如果部分卡片比例突然错乱（比如 16:9 的图变方了），大概率不是 CSS 问题，而是组件实例被复用导致 aspect-ratio 没刷新。特别是用 v-for 或 {cards.map()} 时，key 写成索引或固定值，会让浏览器复用 DOM 节点，样式状态残留。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 卡片组件的
key必须包含比例信息，比如:key="card.id + '-' + card.ratio" - 不要在组件内部用
style动态写aspect-ratio，改用 class 切换（如card--ratio-16-9），CSS 里定义各比例 - 如果卡片带懒加载图片，图片加载完成前先占位（比如用
background-color），否则空白期会触发 Grid 重排，比例抖动
复杂点往往藏在「卡片是不是真正独立」这件事上——Grid 看的是盒模型，而框架、图片加载、CSS 继承都在悄悄改它。动手前先打开 DevTools，盯着 computed styles 里 aspect-ratio 和 width 的实际值，比猜快得多。
