aspect-ratio 在 Grid 中不生效的主因是父容器未启用 Grid 布局或子项存在 width/height 等显式尺寸声明；需确保 display: grid 且避免固定宽高，改用 min/max-width 更稳妥。
aspect-ratio 在 Grid 中不生效的常见原因
直接给 grid-item 设置 aspect-ratio 却发现没反应？大概率是父容器没启用 Grid 布局，或子项被其他尺寸声明（如 width/height）覆盖了。CSS 的 aspect-ratio 是“在无明确宽高时才起作用”的守门员——一旦你写了 width: 100px，它就自动让位。
- 确保父容器显式声明
display: grid或display: inline-grid - 避免对网格子项设置固定
width或height；用min-width/max-width替代更安全 - Firefox 早期版本（layout.css.aspect-ratio.enabled 标志，但当前主流版本已默认支持
Grid + aspect-ratio 实现等比卡片网格的最小可行写法
想让每张卡片保持 4:3 或 1:1 比例，且随容器宽度自适应缩放？核心就是两行 CSS：父容器定义网格结构，子项靠 aspect-ratio 锁定比例，再用 overflow: hidden 防内容撑破。
`.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.grid-item {
aspect-ratio: 4 / 3;
overflow: hidden;
background: #eee;
}
-
minmax(240px, 1fr)保证单列最小宽度，同时允许等分剩余空间 -
aspect-ratio: 4 / 3是推荐写法，比aspect-ratio: 1.333更清晰、更易维护 - 如果子项含图片，建议图片设为
width: 100%; height: 100%; object-fit: cover，否则可能拉伸变形
兼容性兜底：没有 aspect-ratio 怎么办
要支持 Safari 15.4 以下或旧版 Edge，不能只靠 aspect-ratio。传统 padding-top 技巧依然有效，但它和 Grid 配合时容易出错——关键在于把 padding 做在伪元素或内层容器上，而不是直接加在 grid-item 自身上。
- 不要这样写：
.grid-item { padding-top: 75%; }→ 会破坏 Grid 的行高计算 - 推荐方案：用
::before占位 +position: absolute内容层，或包裹一层<div class="aspect-box"> <li>若用 JS 补充，优先监听 <code>resize而非load，因为 Grid 列数变化时，单元格宽度也会变 -
grid-area本身不影响aspect-ratio，但合并后该格子的尺寸由其覆盖的所有轨道决定，aspect-ratio仅约束“自身内容区”，不拉伸轨道 -
transform类操作（包括scale、rotate）会创建新的层叠上下文和坐标系，此时视觉比例 ≠ 盒模型比例 - 真需要变形又保比例？把
transform加在子元素上，而非grid-item本身
为什么 grid-area 或 transform 会让 aspect-ratio 失效
当你用 grid-area 合并单元格，或对子项加了 transform: scale()，aspect-ratio 依然存在，但视觉比例会被覆盖。这不是 bug，而是 CSS 渲染顺序决定的：transform 作用于绘制阶段，而 aspect-ratio 只影响盒模型生成阶段。
立即学习“前端免费学习笔记（深入）”；
实际项目里，最常被忽略的是内容溢出导致的隐式高度增长——哪怕写了 aspect-ratio，一段没截断的长文本仍会让盒子变高。所以 overflow: hidden 和 line-clamp 往往比想象中更重要。
