aspect-ratio 在 grid 子项中不生效，主因是显式轨道（如 grid-template-columns: repeat(3, 1fr)）优先级高于子项比例；应改用 auto-fill/minmax、避免 width/min-width 冲突、启用 box-sizing: border-box 并用 @supports 渐进增强。
aspect-ratio 在 Grid 子项中不生效？检查父容器是否启用了 grid-template-areas 或隐式轨道
很多同学写好 aspect-ratio: 1 / 1 却发现子元素还是被拉伸或压缩，根本原因是 Grid 的轨道尺寸优先级高于子项的 aspect-ratio。当父容器用 grid-template-columns: repeat(3, 1fr) 这类显式定义时，列宽已固定，子项再设 aspect-ratio 也只会缩放内容区，不会撑开轨道。
- 确保父容器使用
grid-auto-columns或grid-template-columns: repeat(auto-fill, minmax(...)))，让列宽可响应子项需求 - 避免同时设置
width或min-width在子项上——它们会覆盖aspect-ratio的基础计算 - 若用
grid-template-areas，每个命名区域必须对应一个显式轨道，此时aspect-ratio完全无效
Grid + aspect-ratio 实现正方形网格的最小可靠写法
不用 JavaScript、不依赖 padding-top 假高度，纯 CSS 最简路径就是靠 grid 的自动行高 + aspect-ratio 联动。关键在于让行高由列宽决定，而列宽又由容器和 minmax() 控制。
- 父容器设
display: grid和grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))) - 子项设
aspect-ratio: 1 / 1和width: 100%（注意：不是height: 100%） - 子项内嵌内容用
display: flex; align-items: center; justify-content: center居中，避免文字溢出
div.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)));
gap: 12px;
}
div.grid > * {
aspect-ratio: 1 / 1;
width: 100%;
background: #eee;
}IE 和旧版 Safari 不支持 aspect-ratio？用 @supports 做渐进增强
aspect-ratio 在 Safari 15.4+、Chrome 88+、Firefox 89+ 才稳定支持；iOS Safari 15.4 之前完全不识别。直接回退到 padding-top 方案会破坏现代浏览器的流式行为，所以要用特性检测隔离。
- 先写现代方案（
aspect-ratio），再用@supports not (aspect-ratio: 1)包裹降级样式 - 降级时对子项设
position: relative，内部伪元素::before设padding-top: 100%，内容层绝对定位填满 - 不要在降级块里重复写
grid相关声明——保持结构一致，只换尺寸控制逻辑
正方形网格在响应式断点下变形？别只调列数，要同步约束子项最小宽度
常见错误是只在媒体查询里改 grid-template-columns，比如从 repeat(4, 1fr) 改成 repeat(2, 1fr)，但没限制子项最小宽度，导致小屏下正方形被压扁。
立即学习“前端免费学习笔记（深入）”；
- 子项加
min-width: 120px（根据设计定），配合minmax(120px, 1fr)使用 - 避免用
vw单位写死子项宽——它和容器宽度耦合太强，容易在窄屏触发单列+超宽正方形 - 如果内容含图片，记得给
img设width: 100%; height: 100%; object-fit: cover，否则图片会撑破比例
实际项目中最容易被忽略的是：子项的 box-sizing 默认是 content-box，一旦加了 border 或 padding，就会让 aspect-ratio 计算的基础宽度变小，正方形立刻失真。加一句 box-sizing: border-box 是成本最低的防御性写法。
