CSS Grid本身不支持子元素等比缩放，需结合aspect-ratio控制容器宽高比、object-fit控制内容适配方式协同实现；现代首选aspect-ratio，兼容旧浏览器可用padding-bottom hack。
Grid本身不支持子元素等比缩放，得靠aspect-ratio或padding hack
CSS Grid 是布局工具，不是缩放引擎。它控制的是轨道划分和项目定位，grid-template-columns 或 grid-area 本身不会让子元素按宽高比自适应。真要“等比放缩”，核心是让子元素容器维持固定宽高比，再让内容在里面居中或覆盖。
现代方案首选 aspect-ratio —— 它直接声明宽高比，浏览器自动计算高度（或宽度），且与 Grid 完全兼容。但要注意：IE 不支持，旧版 Safari（≤15.4）需加 -webkit-aspect-ratio 前缀。
- 用
aspect-ratio: 16 / 9替代手动设 height，避免因父容器尺寸变化导致变形 - Grid 子项上直接写
aspect-ratio即可，无需 wrapper 元素 - 若需兼容老浏览器，用 padding-bottom 百分比 hack：给子项设
position: relative，子元素用position: absolute; top: 0; left: 0; width: 100%; height: 100%
Grid + object-fit 配合 img/video 才能真正“等比显示”
就算容器保持了宽高比，img 或 video 默认仍会拉伸填充。这时候 object-fit 才是关键——它管的是内容如何适配容器，不是容器怎么变。
常见错误是只设 width: 100%; height: 100%，结果图片被压扁。正确做法是让图片“装进”已具备宽高比的 Grid 子项里，并用 object-fit 控制裁剪或缩放方式。
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放并裁剪，适合封面图、卡片图 -
object-fit: contain：等比缩放并留白，适合图标、示意图 - 必须配合
width: 100%; height: 100%，否则object-fit不生效 - Grid 子项本身不能设
min-height: 0（某些 Flex/Grid 组合下会触发 bug），否则height: 100%失效
Grid 中 auto-fit/auto-fill 和 minmax() 容易破坏等比逻辑
当用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))) 这类响应式写法时，列宽动态变化，但子项若没设 aspect-ratio，高度不会跟着变——结果就是网格错位、内容挤压。
根本原因是 minmax() 只约束宽度，不约束高度；Grid 不会主动为每个子项推导高度。你得确保每个子项自己“扛住”宽高比。
- 别指望 Grid 自动让所有子项等高又等比，它只保证行高一致（由
grid-auto-rows或内容撑开） - 响应式场景下，
aspect-ratio必须写在子项上，而不是 Grid 容器上 - 如果子项含文字+图片混合内容，
aspect-ratio可能被文字撑高，此时需加overflow: hidden或用display: grid再套一层限制
Firefox 对 aspect-ratio 在 Grid 中的解析有细微差异
Chrome 和 Safari 对 aspect-ratio 在 Grid 子项中的行为基本一致，但 Firefox（尤其 ≤115）在某些嵌套 Grid 或设置了 align-items: stretch 的场景下，可能忽略 aspect-ratio 并回退到内容高度。
这不是 bug，而是 Firefox 对“stretch 对齐”和“显式宽高比”的优先级处理不同。最稳的解法是切断 stretch 行为。
- 给 Grid 容器加
align-items: start或align-items: flex-start - 子项显式设
align-self: stretch（如果确实需要拉伸） - 避免在 Grid 子项上同时用
height: 100%和aspect-ratio，二者冲突时 Firefox 可能以 height 为准
aspect-ratio 和 object-fit 协同完成。很多人卡在以为 Grid 能“自动缩放”，其实它连高度都不管——这点最容易被忽略。 
