可行但有浏览器兼容边界：Chrome 103+、Firefox 110+、Safari 16.4+ 支持 aspect-ratio，旧版 Safari（15.x 及更早）或 IE 不支持，需用 padding-top 百分比技巧 fallback。
用 aspect-ratio 配合 grid 实现等比例缩放网格，可行但有浏览器兼容边界
Chrome 103+、Firefox 110+、Safari 16.4+ 支持 aspect-ratio，旧版 Safari（15.x 及更早）或 IE 完全不支持，直接 fallback 为宽高比失真。这不是“写法错”，而是 CSS 能力本身没覆盖到。
关键点在于：aspect-ratio 必须作用在 grid item 上（不是 grid container），且 item 需要能响应容器尺寸变化——所以通常配合 grid-template-columns: repeat(auto-fit, minmax(...))) 使用。
-
aspect-ratio值写成1 / 1比1更稳妥，避免部分旧引擎解析歧义 - 不要给 grid item 设固定
height，否则会覆盖aspect-ratio计算逻辑 - 若 item 内有图片/文字，需额外控制内容溢出（比如
overflow: hidden或object-fit: cover）
Grid 容器怎么设才能让每个格子自动等比缩放
核心是放弃固定行列数，改用响应式轨道定义：用 minmax() 锁定最小宽度 + auto-fit 触发重排，让浏览器根据容器宽度自动决定列数，每列再靠 aspect-ratio 维持比例。
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)));\ngrid-auto-rows: 1fr;
注意：grid-auto-rows 设为 1fr 是为了撑高行高，但真正驱动等比的是 item 自身的 aspect-ratio —— 所以这行只是辅助，不能省略，否则行高塌陷。
立即学习“前端免费学习笔记（深入）”；
- 如果设
grid-auto-rows: 200px，那所有行高固定，aspect-ratio就失效了 -
minmax(200px, 1fr)中的200px是最小列宽，太小会导致单列过窄、比例变形；太大则小屏下只剩一列 - 移动端测试时，记得用
viewportmeta 标签，否则 iOS Safari 可能忽略缩放逻辑
为什么加了 aspect-ratio 格子还是被拉伸或压缩
大概率是父级容器或自身存在冲突的尺寸声明。常见干扰源有三类：
- item 上写了
width或height（尤其是height: 100%），会压制aspect-ratio的计算优先级 - grid container 设了
grid-auto-flow: column，导致 item 横向铺开，破坏行列对应关系 - item 内部元素（比如图片）默认
display: inline，底部留白，视觉上像被“撑高”——加vertical-align: top或display: block即可
快速验证方法：临时加 outline: 1px solid red 到 item 上，看 outline 是否正方形；如果不是，说明尺寸没按预期计算。
Safari 15 或更低版本怎么兜底
不能靠 @supports 检测 aspect-ratio（Safari 15 报告支持但实际不生效），得用 JS 特性检测 + class 切换，或者纯 CSS fallback 方案。
推荐 CSS fallback：用 padding-top 百分比技巧模拟宽高比，配合 position: relative / absolute 布局内容：
.grid-item {\n position: relative;\n}\n.grid-item::before {\n content: "";\n display: block;\n padding-top: 100%; /* 1:1 宽高比 */\n}\n.grid-item > * {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n}这个方案兼容到 IE9，但缺点是内容必须绝对定位，且无法响应字体缩放等动态变化。
真正难处理的不是写法，而是当 grid item 同时需要等比 + 内容垂直居中 + 响应文字大小时，aspect-ratio 和 padding-top 两种路径的 DOM 结构和样式耦合度完全不同——改一个就得动全局。
