auto-fit更稳，因其只为有内容项生成列轨道并均分剩余空间，避免空列留白和高度跳变；auto-fill则预占所有可能列，易致iPad留白、iOS Safari漏列及安卓WebView偏差。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能跑通绝大多数视频列表场景，不用写一堆 @media，但必须配合 aspect-ratio 和 object-fit 控制缩略图不变形——否则小屏下卡片高度跳变、文字错位、点击区域偏移全是常态。
为什么 auto-fit 比 auto-fill 更稳？
auto-fit 只为有内容的项生成列轨道，剩余空间自动均分；auto-fill 会预占所有可能列，哪怕空着也留白。视频列表项数不确定，用 auto-fill 容易在 iPad 等中屏上右侧大片留白，或 iOS Safari 15.4 以下漏列。
- 验证方法：临时加一个空
<div>进去，如果它没撑满整行，说明你实际用的是auto-fill -
auto-fit在小屏下自然退化为单列，不会强行维持两列导致溢出 - 某些安卓 WebView 对
auto-fill的轨道计数有偏差，auto-fit兼容性更可靠
怎么锁住视频卡片高度不跳动？
别指望 aspect-ratio 在子元素上自适应——Grid 轨道本身得先定高。按最小列宽反推：280px × 9 / 16 ≈ 157.5px → 向上取整设为 160px，再用 minmax(0, 160px)。
-
grid-auto-rows: minmax(0, 160px)是关键，只写160px会导致空项时轨道塌缩 - 禁用
max-height：Chrome/Safari 已知 bug，和aspect-ratio冲突，必出上下黑边 -
video元素本身不设height: 100%，它会忽略父容器的aspect-ratio直接拉伸
移动端点击失效或 touch 穿透怎么办？
iOS Safari 默认拦截未激活视频的 pointer 事件，尤其当卡片加了 opacity: 0.99 或 transform 时更明显。
立即学习“前端免费学习笔记（深入）”；
- 必须同时加
playsinline和webkit-playsinline属性，缺一不可 - 慎用
pointer-events: none：首次交互前临时禁用，建议改用visibility: hidden配合 JS 切换 - 某些安卓 WebView 对
aspect-ratio支持不稳定，记得给视频父容器加min-height: 0防止 Grid 轨道高度计算异常
真正容易被忽略的是：视频父容器必须是 display: block 或 display: grid，如果是 inline 元素（比如没设 display 的 <span>），aspect-ratio 会失效；另外，别对 video 自身设 aspect-ratio，它只作用于块级容器。
