html5视频元素不支持css grid直接网格定位，因其是替换元素；grid仅控制其容器级位置，需配合display:block、width/height:100%、object-fit等属性实现画面适配。
HTML5 视频元素本身不支持 CSS Grid 布局的直接“网格定位”——<video></video> 是一个替换元素（replaced element），它的尺寸和渲染行为受 width、height、object-fit 和父容器的 Grid 轨道约束共同影响，不是 Grid 容器里的“普通网格项”。
Grid 布局对 <video></video> 的作用范围仅限于容器级定位
你不能用 grid-row/grid-column 让视频“跨多个轨道”却保持内容自动拉伸适配；也不能靠 place-self 精确控制内部播放区域。Grid 只管把 <video></video> 这个盒子放在哪条行/列轨道里，至于视频画面怎么填满这个盒子，得靠其他属性配合：
-
<video></video>必须设为display: block（默认是inline），否则会受基线对齐干扰，导致 Grid 定位偏移 - 若想填满整个网格单元，需显式设置
width: 100%和height: 100%，否则它可能按固有宽高比收缩 -
object-fit: cover或contain决定画面如何适应容器尺寸，不设则默认拉伸变形
object-fit 与 Grid 单元尺寸不匹配时的常见错觉
开发者常以为设置了 grid-area: 1 / 2 / 3 / 4，视频就会“按网格逻辑铺开”，结果发现画面被裁切或留黑边——这通常不是 Grid 错了，而是 <video></video> 的固有宽高比（如 16:9）和目标网格单元的长宽比不一致：
-
object-fit: cover→ 保持比例、裁切溢出，适合全屏背景类场景 -
object-fit: contain→ 完整显示、留空，适合教学演示等需看清全部画面的场景 -
object-fit: fill→ 强制拉伸，会变形，慎用 - 若 Grid 单元本身用
minmax(0, 1fr)或auto行高，可能因内容未加载完导致高度塌陷，建议给<video></video>父容器设最小高度（如min-height: 200px）
老浏览器（IE11 及更早）根本不支持 Grid + <video></video> 组合
CSS Grid 是 Level 1 规范，IE11 仅支持过时的旧语法（display: -ms-grid），且对 <video></video> 的兼容性极差：无法响应 -ms-grid-row、object-fit 完全无效、width: 100% 在 flex/grid 容器中常失效。真实项目中若需兼容 IE：
立即学习“前端免费学习笔记（深入）”；
- 必须降级为 float + width 百分比布局，或使用
display: table-cell - 用 Modernizr 检测
cssgrid和objectfit特性，动态加载 polyfill 或切换 class - 不要依赖
aspect-ratio（非 Grid 相关但常一起用），IE 和部分旧 Edge 也不支持
Grid 对 <video></video> 的控制本质是“盒模型级”的，不是“媒体内容级”的。真正难调的从来不是写几行 grid-column，而是让不同分辨率、不同宽高比的视频在各种网格尺寸下既不溢出、又不糊掉、还保持可交互控件可用——这些细节往往藏在 aspect-ratio、min/max-width 和媒体查询的嵌套里。
