auto-fit比auto-fill更适合视频列表，因其只创建有内容的列并均分剩余空间，避免留白和行高计算失准；grid-auto-rows应设为minmax(0, 180px)以锁定高度，父容器用aspect-ratio: 16/9或padding-top降级，video自身不设aspect-ratio和height:100%。
直接用 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) + grid-auto-rows 控制高度，比靠 aspect-ratio 更稳——后者在 Grid 中容易因轨道重算导致视频忽高忽低。
为什么 auto-fit 比 auto-fill 更适合视频列表
auto-fill 会为所有可能列预留轨道，哪怕没内容也占位，导致 Grid 行高计算失准；同一行里不同宽度的视频，按 aspect-ratio: 16 / 9 算出的高度不一致，视觉上跳动明显。auto-fit 则只创建有内容的列，并把剩余空间均分给它们，配合固定行高就能锁住物理尺寸。
-
auto-fit：子项少时不会留白，小屏下自动退化为单列，不撑破容器 -
auto-fill：仅适用于需要“坐标对齐”的场景，比如带编号的帧预览面板 - iOS Safari 15.4 以下对
auto-fill的轨道计数有偏差，容易漏列
怎么设 grid-auto-rows 才不让视频高度乱跳
别依赖子元素自适应，要把高度控制权交给 Grid 轨道本身。先按你期望的最小列宽反推高度：320px 宽 → 高度 = 320 × 9 / 16 = 180px，然后设 grid-auto-rows: minmax(0, 180px)。
- 必须用
minmax(0, 180px)，不能只写180px，否则内容为空时 Grid 可能塌缩 - 禁用
max-height：它和aspect-ratio冲突，Chrome/Safari 均未修复该组合 bug，会出现上下黑边 - 视频元素统一写
width: 100%; height: 100%; object-fit: cover;，不设aspect-ratio在 video 自身上
video 父容器怎么保持 16:9 又不拉伸变形
aspect-ratio: 16 / 9 必须加在 video 的父容器（如 div.video-item）上，且该容器需是 display: block 或 display: grid，否则 inline 行为会干扰比例计算。
- 老版 Safari（15.3 以下）不支持
aspect-ratio，得用padding-top: 56.25%+position: relative/absolute降级，此时父容器必须设position: relative - 别对
video元素本身设height: 100%—— 它会忽略aspect-ratio，直接拉伸 - 某些安卓 WebView 对
aspect-ratio支持不稳定，建议加min-height: 0防止 Grid 轨道高度计算异常
移动端点击失效或 touch 穿透怎么办
iOS Safari 默认拦截未激活视频的 pointer 事件，尤其当 video 有 opacity: 0.99 或 transform 时更明显。
- 必须同时加
playsinline和webkit-playsinline属性，缺一不可 - 慎用
pointer-events: none：首次交互前临时禁用，建议改用visibility: hidden - 如果用
poster图做封面，确保其尺寸与aspect-ratio一致，否则点击热区偏移
最易被忽略的是：Grid 轨道高度必须由 grid-auto-rows 主导，而不是靠子元素撑开——一旦让视频自己决定高度，就等于把控制权交给了不可控的内容流，响应式就只是看起来在动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
