video父容器必须设aspect-ratio并display: block，video自身仅设width: 100%、height: 100%、object-fit: cover；Grid布局需用auto-fit+minmax()和grid-auto-rows: minmax(0, 160px)锁定高度；移动端须同时加playsinline和webkit-playsinline。
video父容器必须设aspect-ratio，不能设在video元素上
浏览器对video这类替换元素的aspect-ratio支持极弱——哪怕写了aspect-ratio: 16 / 9，它也基本忽略。真正起效的是它的**直接父容器**，且该容器必须是块级（display: block或display: grid），不能是默认的inline。常见错误是把aspect-ratio加在video标签上，或包裹它的div没设display，结果比例完全不生效。
实操建议：
- 给视频卡片外层
div加aspect-ratio: 16 / 9和display: block -
video自身只设width: 100%、height: 100%、object-fit: cover，不写任何宽高内联样式 - 避免用
max-height：Chrome/Safari 已知会与aspect-ratio冲突，导致上下黑边
用auto-fit配minmax()控制列数，别用auto-fill
auto-fill会预占所有可能列轨道，哪怕内容为空也留白；auto-fit只对有内容的项生成轨道，剩余空间自动均分——这对视频列表这种项数不确定、常含空占位符的场景更稳。
典型写法：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
立即学习“前端免费学习笔记（深入）”；
注意点：
- iPad等中屏下，
auto-fill易右侧大片留白；iOS Safari 15.4以下甚至漏列 - 某些安卓 WebView 对
auto-fill轨道计数有偏差，auto-fit兼容性更可靠 - 验证是否真用了
auto-fit：临时加个空<div>，如果它没撑满整行，说明实际是auto-fill
高度跳变？问题出在Grid轨道没锁死，不是aspect-ratio失效
aspect-ratio只管宽高比，不管绝对高度。当grid-template-columns用1fr时，每列宽度随屏幕变化，但Grid行高仍由内容撑开，导致卡片忽高忽低——缩略图拉伸、文字错位、点击区域偏移都源于此。
解决关键：把高度控制权交给Grid轨道本身。
- 按最小列宽反推高度：280px × 9 / 16 ≈ 157.5px → 向上取整为
160px - 用
grid-auto-rows: minmax(0, 160px)锁定行高，配合aspect-ratio共同约束 - 禁用
minmax(160px, 160px)：会导致空项时轨道塌缩；minmax(0, 160px)才是安全选择 - 某些安卓 WebView 需额外加
min-height: 0到视频父容器，防Grid轨道高度计算异常
移动端点击失效？大概率是playsinline没配全
iOS Safari 默认拦截未激活视频的pointer事件，尤其当卡片加了opacity: 0.99或transform时更明显。这不是CSS Grid的问题，但常被误判为布局bug。
必须同时加两个属性：
-
playsinline（标准属性） -
webkit-playsinline（WebKit私有前缀）
缺一不可。慎用pointer-events: none：首次交互前若临时禁用，建议改用visibility: hidden配合JS切换，避免穿透残留。
真正容易被忽略的是：Grid容器本身不能依赖子元素撑高，而要靠grid-auto-rows + aspect-ratio双约束；还有，旧版Safari（15.3以下）必须降级用padding-top: 56.25% + position: relative/absolute方案，此时务必确保父容器有position: relative，否则video会脱离Grid流。
