aspect-ratio 在 grid 单元中不生效，主因是网格项未生成块级盒或受 display 干扰；需确保其为 block 级、避免 display: contents/inline，并配合 minmax(0, 1fr) 实现响应式等比缩放。
aspect-ratio 在 Grid 单元中不生效？先确认父容器 display 类型
直接写 aspect-ratio: 1 / 1 却没反应，大概率是因为网格项（grid item）本身不是 block 级盒子，或者被 display: contents、display: inline 等值干扰了盒模型。Grid 容器里每个子元素默认是 grid item，但 aspect-ratio 只对生成「块级盒」的元素起作用。
- 确保网格项没有设置
display: inline、display: inline-block或display: contents - 如果用了
grid-template-areas，注意命名区域本身不渲染，真正承载aspect-ratio的是内部元素，不是区域占位符 - Firefox 110+ 和 Chrome 88+ 支持良好，但 Safari 15.4+ 才开始支持 grid item 上的
aspect-ratio；旧版 Safari 需 fallback
用 grid-template-columns + aspect-ratio 实现等比矩阵，别漏掉 minmax()
单纯靠 grid-template-columns: repeat(3, 1fr) + 每个子项 aspect-ratio: 1，只能保证单个格子宽高相等，但整行高度仍由内容撑开，无法形成「严格等比缩放」——也就是窗口变窄时，所有格子同步等比例缩小。
- 必须配合
minmax(0, 1fr)：写成grid-template-columns: repeat(3, minmax(0, 1fr))，否则 fr 轨道会因内容最小尺寸限制而卡住缩放 - 给网格容器加
width: 100%和height: 0+padding-bottom: 100%是老办法，但会破坏语义和可访问性；现在优先走aspect-ratio+minmax(0, 1fr) - 若需响应式列数变化（比如移动端 2 列），用
@container比媒体查询更精准，但需开启 container queries 支持
Grid 中图片/内容溢出导致 aspect-ratio 失效？用 object-fit 或 clamp() 控制
即使格子自身保持 1:1，里面的 <img alt="CSS网格实现的等比缩放矩阵_利用aspect-ratio控制网格单元" > 或文字可能拉伸或撑破布局，让“等比缩放”在视觉上失效。
-
<img alt="CSS网格实现的等比缩放矩阵_利用aspect-ratio控制网格单元" >必须加width: 100%; height: 100%; object-fit: cover;，否则默认按原始尺寸渲染，无视父容器aspect-ratio - 文字内容多时，用
font-size: clamp(0.75rem, 4vw, 1.25rem)替代固定值，避免小屏下文字溢出或过大 - 慎用
overflow: hidden直接裁剪——它会掩盖布局问题，比如 padding 或 margin 导致的错位，应先检查盒模型尺寸是否被 border-box 影响
Safari 兼容性兜底：用 aspect-ratio fallback 时，别用伪元素模拟
为 Safari 15.3 及更早版本写 fallback，常见错误是用 ::before + padding-top: 100% 模拟宽高比，但这会让伪元素脱离文档流，导致 grid track sizing 计算异常，格子高度归零或错乱。
立即学习“前端免费学习笔记（深入）”；
- 正确 fallback 是用
position: relative+ 子元素position: absolute占满，再把真实内容用position: absolute叠上去 - 或直接降级为 flex +
padding-bottom布局，但需额外 wrapper，且无法享受 grid 的 track 对齐能力 - 检测时别只看 UA 字符串，用
@supports (aspect-ratio: 1)更可靠；注意 Safari 15.4 之前该特性被标记为 experimental，需开启实验性功能开关
真正麻烦的不是写法本身，而是当 aspect-ratio 和 grid-row-start/grid-column-start 同时存在时，某些浏览器会忽略显式轨道定位，优先按 aspect-ratio 推导尺寸——这种隐式行为很难调试，建议显式设置 grid-row 和 grid-column 并配合 align-self 微调位置。
