必须用 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> 或未设 display: block 的包裹 <div> 上，它会失效或被忽略。
- 视频父容器必须是
display: block或display: grid（不能是 inline） -
<video>自身禁用height: 100%，否则无视aspect-ratio拉伸变形 - 旧版 Safari（15.3 以下）不支持
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> - 慎用
pointer-events: none：首次交互前临时禁用，建议改用visibility: hidden配合 JS 切换 - 确保视频容器有明确的点击区域：别依赖
padding扩展热区，用min-height+aspect-ratio显式撑开
真正容易被忽略的是：Grid 容器的 gap 和子项的 margin 会挤压可用宽度，导致本该出现两列的地方只剩一列——检查时先临时清掉所有 gap 和外边距，确认基础列数逻辑跑通再加回样式。
