应为video父容器设置aspect-ratio: 16 / 9并设display: block；video自身不设宽高，避免内联样式干扰，确保Grid布局下维持16:9比例。
video元素直接撑满网格项时比例失真
纯CSS Grid布局下，video元素默认不维持16:9，拉伸变形是常态——不是视频本身问题，而是容器没给“占位空间”。浏览器渲染时，video按内容尺寸（比如原始480×270）计算宽高，Grid轨道却按内容流撑开，导致缩放错乱。
真正有效的做法是用aspect-ratio: 16 / 9锁定容器，而非依赖video的width/height属性或内联样式：
-
aspect-ratio必须加在video的父容器上（比如div.video-wrapper），不是video自己 - 父容器需设
display: block或display: grid，避免inline行为干扰比例计算 - 若兼容IE或旧版Safari（padding-top: 56.25% +
position: relative/absolute老方案
Grid模板列数动态变化但视频高度不一致
用grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))时，不同屏幕宽度下每行列数变，但单个视频高度可能忽高忽低——根源是1fr按剩余空间均分，而aspect-ratio只管宽高比，不管绝对高度。
解决关键：把高度控制权交给Grid轨道本身，而不是靠子元素自适应：
立即学习“前端免费学习笔记（深入）”；
- 改用
grid-auto-rows: minmax(0, 160px)（数值按16:9反推，如320px宽对应180px高） - 配合
video { width: 100%; height: 100%; object-fit: cover; }，确保内容填满且不畸变 - 避免对
video设max-height，它会和aspect-ratio冲突，导致上下留黑边
移动端touch事件穿透到视频下方图层
在iOS Safari中，如果video没加playsinline且未触发播放，点击区域可能透传到背后的Grid容器或按钮，尤其当video有opacity: 0.99或transform时更明显。
这不是CSS问题，是WebKit对未激活媒体元素的事件拦截策略：
- 必须加
playsinline和webkit-playsinline两个属性，缺一不可 - 首次交互（如点击播放按钮）前，
video的pointer-events: none要慎用——哪怕只是临时禁用，也建议用visibility: hidden替代 - 若用
poster图做封面，确保其尺寸与aspect-ratio一致，否则点击热区偏移
加载慢时placeholder闪烁或跳动
视频加载中，poster图先显示，等loadeddata事件后才替换成画面，期间若Grid重排或图片解码延迟，会出现空白闪动或网格塌陷。
核心是让占位空间“稳住”，不等资源就位就开始布局：
- 给
video父容器设min-height: 0，防止Grid在内容为空时塌缩 - 用
background-image模拟poster（带base64小图），并设background-size: cover，比img标签更可控 - 避免用
visibility: hidden隐藏未加载的video，改用opacity: 0+transition: opacity .2s渐显，视觉更连贯
最易被忽略的是aspect-ratio和grid-auto-rows的配合时机：前者管单个项比例，后者管整行高度节奏。两者不联动，网格就会在断点切换时出现“有的高、有的矮”的错层感。调的时候得一起看，不能只盯一个。
