aspect-ratio: 1/1在grid中常不生效，因其仅作为后备规则，在子项有width/height/min-width或父容器用显式轨道（如repeat(3,1fr)）时自动让位，导致视觉上拉扁或撑高。
aspect-ratio 能实现正方形单元格，但不是设了就生效——它只在“没被显式宽高压制”的前提下才起作用。直接写 grid-template-columns: repeat(3, 1fr) + aspect-ratio: 1，大概率失效。
为什么 aspect-ratio: 1 在 Grid 里常不生效
核心原因是：浏览器把 aspect-ratio 当作“后备计算规则”，一旦子项有 width、height、min-width 或父容器用了固定轨道（如 grid-template-rows: 100px），它就自动让位。
- 常见错误现象：
aspect-ratio: 1 / 1在开发者工具里显示已应用，但单元格明显被拉扁或撑高 - 检查重点：子项是否写了
width或min-width；父容器是否用了repeat(3, 1fr)这类显式行高定义 - Firefox @supports not (aspect-ratio: 1) 是唯一靠谱的检测方式
真正起效的 Grid + aspect-ratio 组合写法
关键不是“怎么写 aspect-ratio”，而是“怎么让它的计算上下文成立”。必须满足三个条件：列宽可响应、行高由列宽反推、子项不抢控制权。
- 父容器用
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)))—— 避免硬写1fr 1fr 1fr - 加
grid-auto-rows: 1fr（不是grid-template-rows）—— 它提供弹性行高占位，为aspect-ratio提供计算依据 - 每个网格项只设：
aspect-ratio: 1 / 1和width: 100%（绝不能写height: 100%或min-height） - 内容居中用
display: flex; align-items: center; justify-content: center，避免文字溢出破坏比例
当内容高度变化时，如何防止容器整体溢出
仅靠 aspect-ratio 无法约束整行高度一致性——如果某个单元格内容多、行高大，它会把所在行整体顶高，导致父容器撑开。这时需要 JS 辅助或结构约束。
- 纯 CSS 方案：确保所有单元格都参与
aspect-ratio计算，即每个grid-area至少有一个带aspect-ratio的项（哪怕只是空<div></div>） - JS 方案更可靠：测量首个渲染完成的单元格
offsetWidth，然后动态设置grid-template-columns: repeat(3, [width]px)，让所有列宽锁定，aspect-ratio自然推导出统一高度 - 容易踩的坑：在
resize或内容异步加载后忘记重新测量；未用box-sizing: border-box导致 padding/border 加在 width 外，实际宽度超预期
最易忽略的一点：aspect-ratio 的计算基准是内容盒（content box）+ padding + border，但它不会主动压缩内容。如果文字太多换行太多，即使宽高比正确，视觉上也会“撑破”预期尺寸——这时候得配合 overflow: hidden 或 line-clamp 控制内容体量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
