正确做法是用 auto-fit + grid-auto-rows 锁定行高：设 grid-auto-rows: minmax(0, 180px)，repeat(auto-fit, minmax(320px, 1fr)))，视频父容器 aspect-ratio: 16/9 + object-fit: cover。
不能靠 aspect-ratio 加 auto-fill 就完事——那样视频高度会跳变，16:9 只是视觉错觉。
为什么 grid-template-columns: repeat(auto-fill, ...) + aspect-ratio 失效
根本原因是：Grid 的 auto-fill 会为所有可能列预留轨道，哪怕没内容；而 aspect-ratio 是子元素级约束，只管宽高比，不锁绝对高度。结果就是同一行里列宽随容器缩放，视频高度被反复重算（比如 320px 宽 → 高 180px，340px 宽 → 高 191px），上下跳动。
-
1fr分配的是剩余宽度，高度仍依赖内容撑开，Grid 轨道本身没设高 -
aspect-ratio在 Grid 中优先级低于轨道尺寸，浏览器先按轨道分配空间，再让子元素“适配” -
max-height和aspect-ratio组合在 Safari/Chrome 中存在未修复冲突，会导致上下黑边
正确做法：用 auto-fit + grid-auto-rows 锁定物理行高
把高度控制权从视频手里收回来，交给 Grid 轨道本身。关键不是“让视频保持比例”，而是“让每行轨道固定高度，再让视频填满它”。
- 先按最小期望列宽反推高度：例如最小列宽
320px→ 对应320 * 9 / 16 = 180px - 设
grid-auto-rows: minmax(0, 180px)，强制每行轨道高度上限为 180px - 列定义改用
repeat(auto-fit, minmax(320px, 1fr))，空列自动合并，不占位 - 视频父容器设
aspect-ratio: 16 / 9+display: block，视频自身不设width/height
video 元素自身必须配合 object-fit 和 position
即使容器比例正确，<video></video> 默认仍是 object-fit: contain，画面四周留白或拉伸变形是常态。
- 必须显式加
object-fit: cover，否则不会铺满容器 - 若用
object-fit: cover，建议加background-color: #000或阴影，避免裁切边缘突兀 - 别对
<video></video>设height: 100%—— 它会忽略aspect-ratio，直接拉伸 - 旧版 Safari（15.3 以下）不支持
aspect-ratio，得降级用padding-top: 56.25%+position: relative包裹，且父容器必须有position: relative，否则视频绝对定位会脱离 Grid 流
真正稳定的视频展示墙，靠的不是让每个视频“自己守规矩”，而是 Grid 轨道先划好物理格子，再让视频在里面规整填充——比例只是结果，不是手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
