aspect-ratio: 1/1在Grid中常不生效，因其仅为后备规则，遇子项显式宽高、min-width或父容器固定行高（如grid-auto-rows: 200px）即被跳过；须确保子项width: 100%、height: auto、无min-width、列定义用minmax(0, 1fr)且写在块级Grid子项上。
aspect-ratio在 CSS Grid 中能控制单元格比例，但**不是设了就生效**——它只在特定条件下介入计算，多数失效问题都出在布局上下文被破坏。
为什么 aspect-ratio: 1/1 在 Grid 里常不生效
浏览器把 aspect-ratio 当作“后备规则”，一旦遇到显式尺寸声明就直接跳过。常见现象是开发者工具里样式明明已应用，但单元格被拉扁或撑高。
- 子项写了
width、height或min-width（哪怕只是min-width: 0） - 父容器用了
grid-template-rows: 200px或grid-auto-rows: 200px这类固定行高定义 - 子项是
<img>且直接加了aspect-ratio—— 替换元素的固有宽高比优先级更高，该声明会被忽略 - 子项没写
width: 100%，导致aspect-ratio缺少宽度基准，无法反推高度
Grid 容器列定义怎么配合 aspect-ratio 不打架
关键在于让列宽可变、不锁死，把高度控制权完全交给子项的 aspect-ratio。
- 避免用
grid-template-columns: 200px 200px或repeat(3, 1fr)—— 这些写法本身不压制比例，但若同时设了grid-auto-rows: 200px就会覆盖 - 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)))，其中240px是最小可用宽度，低于它自动换行 - 配
grid-auto-rows: 1fr（不是grid-template-rows），它提供弹性占位，为aspect-ratio提供计算依据 - 别在子项上写
height: 100%或min-height——aspect-ratio只在height: auto时起作用
aspect-ratio 必须写在容器上，不能写在 <img> 上
<img> 是替换元素，其尺寸由固有宽高或显式属性决定，aspect-ratio 在它上面无法触发布局计算。
- 正确做法：给卡片容器（如
.card）设aspect-ratio: 4/3、width: 100%、overflow: hidden -
<img>只负责渲染：加width: 100%、height: 100%、object-fit: cover - 如果容器是 inline 元素（比如没设
display），先加display: block或display: flex - 懒加载未触发、
src为空或跨域失败时，<img>高度可能为 0，导致 Grid 行高塌陷；外层容器设aspect-ratio可规避这个问题
兼容性和 fallback 怎么做才稳
Chrome 88+、Firefox 89+、Safari 15.4+ 原生支持 aspect-ratio；iOS 15.2 及更早 Safari、微信 X5 内核、IE 等完全不识别，会静默忽略。
- 用
@supports (aspect-ratio: 1/1)包裹新逻辑，降级用padding-bottom百分比技巧 - 别写
aspect-ratio: 16:9或aspect-ratio: 1.777—— 只接受16 / 9或16/9（斜杠前后空格可选），写错整条声明失效 - PostCSS / autoprefixer 配置要检查，某些老旧版本会自动删掉
aspect-ratio - 移动端横竖屏切换时比例错乱？改用
minmax(clamp(200px, 25vw, 280px), 1fr)替代固定像素最小值
真正起效的组合很窄：父容器列宽可变、子项无显式宽高压制、aspect-ratio 写在块级/Grid 子项上、且有明确宽度来源。漏掉任一环，它就安静退场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
