必须用 grid-auto-rows 锁定轨道高度并配合 aspect-ratio 父容器控制比例，因 grid 轨道不联动宽高，直接在子项设 aspect-ratio 会失效，且需规避 safari 旧版兼容、webview 不稳及点击穿透等问题。
不能只靠 aspect-ratio + grid-template-columns 就搞定——Grid 轨道本身不联动宽高，视频容器必须独立控制比例，否则小屏下卡片高度跳变、缩略图拉伸、文字错位全是常态。
为什么 aspect-ratio 不能直接写在 Grid 子项上？
Grid 的行高（grid-auto-rows 或 grid-template-rows）默认由内容撑开，而 aspect-ratio 只对块级容器生效，且需父容器不设固定 height。若把 aspect-ratio: 16 / 9 直接加在 <video></video> 或未设 display: block 的包裹 <div> 上，它会失效或被忽略。
<ul>
<li>视频父容器必须是 <code>display: block 或 display: grid（不能是 inline）
<video></video> 自身禁用 height: 100%，否则无视 aspect-ratio 拉伸变形aspect-ratio，得用 padding-top: 56.25% + position: absolute 降级怎么让每张视频卡片高度一致不跳动？
关键不是“让图片缩放”，而是“锁定轨道高度”。按最小列宽反推：比如 minmax(280px, 1fr)，那 16:9 下理论高度 ≈ 157.5px → 向上取整为 160px，再用 grid-auto-rows 锁死。
- 写
grid-auto-rows: minmax(0, 160px)，不是160px（否则空项时轨道塌缩） - 禁用
max-height：Chrome/Safari 已知与aspect-ratio冲突，必出上下黑边 - 安卓 WebView 对
aspect-ratio支持不稳，记得给视频父容器加min-height: 0
列数自适应该用 auto-fit 还是 auto-fill？
auto-fit 是唯一稳妥选择。视频列表项数不确定，auto-fill 会预占所有可能列轨道，导致 iPad 留白、iOS Safari 漏列、安卓 WebView 计算偏差。
- 写
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 别写
minmax(200px, 1fr)—— 1fr 在小屏下仍试图均分，易卡死成一列不动 - 最小值忌用
em/rem；更稳的是clamp(240px, 25vw, 320px)，兼顾字体缩放和设备宽度
移动端点击失效或 touch 穿透怎么解？
iOS Safari 默认拦截未激活视频的 pointer 事件，尤其当卡片加了 opacity: 0.99 或 transform 时更明显。
- 必须同时加
playsinline和webkit-playsinline属性到<video></video> - 慎用
pointer-events: none：首次交互前临时禁用，建议改用visibility: hidden配合 JS 切换 - 确保视频容器有明确的点击区域：别依赖
padding扩展热区，用min-height+aspect-ratio显式撑开
真正容易被忽略的是：Grid 容器的 gap 和子项的 margin 会挤压可用宽度，导致本该出现两列的地方只剩一列——检查时先临时清掉所有 gap 和外边距，确认基础列数逻辑跑通再加回样式。
