aspect-ratio在Grid中不生效，主因是父容器使用显式轨道（如repeat(3,1fr)）或子项存在width/height等显式尺寸声明；需改用auto-fill/minmax、清除子项固定宽高、确保display:grid并配合width:100%触发比例计算。
aspect-ratio 在 Grid 中设了却不生效？基本可以断定：不是浏览器不支持，而是布局逻辑卡住了它起作用的前提。
aspect-ratio: 1 / 1 不生效的典型现场
- 网格项渲染出来是扁的或拉长的，开发者工具里明明看到
aspect-ratio: 1 / 1已生效，但视觉上完全没“方” - 检查父容器发现用了
grid-template-columns: repeat(3, 1fr)这类显式轨道定义，而子项又写了width: 200px或min-width: 240px - Firefox 或 Safari 旧版（
aspect-ratio 是个“守门员”——只在没有显式宽高约束时才介入计算。一旦你写了 width、height、min-width，它就自动退场。
- 确保父容器声明
display: grid（不能只是inline-grid且没设列） - 删除所有网格子项上的
width、height、min-width、max-width（用minmax(240px, 1fr)控制列宽，而不是在子项上硬写） - 若用了
grid-template-areas，每个区域必须对应可响应的轨道（即不能全靠1fr列却没配grid-auto-rows）
为什么 grid-template-columns: 1fr 1fr 不能保证正方形
因为 1fr 只管列宽分配，不管行高；行高默认由内容撑开，和列宽毫无关系。即使你给每个子项加了 aspect-ratio: 1 / 1，若父容器轨道高度被固定（比如写了 grid-auto-rows: 100px），或者子项自身有 height 声明，比例就失效。
真正起作用的组合是：
-
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)))→ 让列宽可变、响应容器 -
grid-auto-rows: 1fr→ 提供基础行高占位（虽不直接决定像素值，但为aspect-ratio提供计算上下文） - 子项仅设
aspect-ratio: 1 / 1和width: 100%（注意：不是height: 100%）
width: 100% 是关键——它让子项宽度严格跟随所在列宽，aspect-ratio 才能据此反推高度。
兼容性兜底：Safari 15.3 及更早版本怎么办
@supports not (aspect-ratio: 1) 是唯一安全的检测方式。别用 Modernizr 或 UA 判断，容易漏判。
降级方案必须满足三点：
- 不破坏 Grid 结构（仍用
display: grid和相同grid-template-columns） - 把
padding-top: 100%加在子项内部一层容器（如.aspect-box）或伪元素上，绝不能直接加在grid-item自身上 - 内容层用
position: absolute填满，否则会脱离文档流或撑破
.grid-item {
position: relative;
}
.grid-item::before {
content: "";
display: block;
padding-top: 100%;
}
.grid-item > * {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
这个结构在现代浏览器中会被 @supports 隐藏，在旧版中才启用，不会冲突。
容器尺寸突变时比例错乱，问题往往不在 CSS
横竖屏切换、动态加载新卡片、或父容器用 JS 改了 width 后，aspect-ratio 会重新计算，但如果子项同时存在 min-width 和 gap，可能导致列宽压缩、高度跟不上。
最容易被忽略的是：
-
gap会从容器总宽中扣除，影响minmax()的可用空间，进而影响单列宽度基准 - 没设
box-sizing: border-box，导致padding或border挤压内容区，使width: 100%实际变窄 - 图片没设
width: 100%; height: 100%; object-fit: cover，内容溢出撑高，覆盖了aspect-ratio效果
真正稳的写法，是把所有干扰项清空，只留 display: grid、minmax()、aspect-ratio 和 width: 100% 四样东西。多加一行，就多一个失效可能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
