grid本身不支持宽高联动，设1fr或minmax仍依赖内容撑高；视频在grid中易拉伸塌陷，aspect-ratio兼容性差且无法与padding-top共存；安全方案是用position: relative + padding-top的独立容器包裹视频，并确保grid仅负责布局定位。
为什么不能直接用 CSS Grid 控制视频宽高比
Grid 本身不提供“宽高联动”能力。你设 grid-template-rows: 1fr 或 minmax(0, 1fr)，高度仍依赖内容撑开或显式值；而视频在流式布局中会破坏比例——height: auto 在 <video></video> 上行为不可靠，尤其嵌套在 grid 容器里时，浏览器常忽略原始比例，导致拉伸或塌陷。
Grid 的列宽可响应，但行高不会随列宽等比缩放。想靠 aspect-ratio 属性？它虽能作用于 grid item，但 IE 完全不支持，iOS Safari 15.4 及更早有渲染抖动，且无法 fallback 到 padding 技巧（因为 aspect-ratio 和 padding-top 互斥）。
Grid 容器里怎么安全套用 padding-top 黑科技
必须把 padding 逻辑“隔离”在 Grid 子项内部，不能让 Grid track 直接参与比例计算。
- Grid 父容器只管布局位置和尺寸分配，比如
display: grid; grid-template-columns: 1fr 2fr; - 每个视频区域用独立子元素包裹，该子元素才是真正的比例容器：设
position: relative; width: 100%; height: 0; padding-top: 56.25%; - 视频元素放在这个子元素内，设
position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 别给这个子元素设
grid-row或grid-column外的尺寸限制（如min-height），否则 padding 会被压制
常见翻车点：
- 把
<video></video>直接写成 grid item，没加中间 wrapper → padding 不生效，视频撑高 grid row - Grid 容器设了
align-items: start，但子项用了height: 0→ 子项视觉消失（因无内容、无 padding 支撑） - 在 grid item 上同时写
padding-top和height: 100%→ 高度叠加，比例错乱
object-fit 和 Grid 布局冲突怎么解
Grid 不影响 object-fit，但会影响它的生效前提：如果视频父容器没正确撑开高度（比如 grid row 高度为 auto 且子项未 absolute 定位），object-fit 就没空间可 fit。
-
object-fit: cover是最常用选择，但需确保父容器真实高度 ≥ 视频原始高度 × 缩放比，否则裁剪异常 - 若 Grid 区域被
overflow: hidden包裹，又没给视频容器留足 padding 占位，边缘裁剪会不可控 - iOS Safari 中，
object-fit在绝对定位 video 上偶发失效（尤其配合transform时），建议加backface-visibility: hidden修复
关键检查项：
- 视频容器 computed height 是否等于其
padding-top值（即宽度 × 比例系数） -
getComputedStyle(video).height是否为非零像素值 - 移动端真机调试时，禁用 zoom 缩放（
viewportmeta 中避免user-scalable=yes）
SCSS mixin 如何适配 Grid 场景
不要试图让 mixin 输出 grid 属性，专注封装比例容器逻辑：
@mixin ratio-container($w: 16, $h: 9) {
position: relative;
width: 100%;
height: 0;
padding-top: percentage($h / $w);
box-sizing: border-box;
<blockquote><p>video,
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}</p></blockquote>
调用时保持语义清晰：
.grid-video-item {
@include ratio-container(16, 9);
}
注意：
- 不要在 mixin 里写
display: grid或grid-area，那是布局层职责 - 若需多比例共存（如侧边栏 4:3 + 主区 16:9），用 data 属性控制更灵活：
[data-ratio="4:3"] { padding-top: 75%; } - SCSS 除法必须加括号：
percentage($h / $w)，否则$h / $w被解析为 CSS 除法语法报错
真正容易被忽略的是：Grid 容器的 width 必须有确定来源（比如 max-width 或父级约束），否则子项的 padding-top 会按 0 计算——整个容器塌成一条线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
