aspect-ratio 是首选方案，因其让容器自身保持固定宽高比，不依赖内容撑开，兼容现代浏览器（Safari 15.4+、Chrome 88+、Firefox 89+），且与 Grid 布局协同稳定；旧版 Safari 需 padding-top 回退。
为什么 aspect-ratio 是首选方案
现代浏览器中实现固定比例（如 16:9）的视频容器，最直接的方式就是用 aspect-ratio。它让容器自身“记住”宽高比，不依赖内容撑开，也不需要 padding-top 技巧。Grid 项设了 aspect-ratio 后，即使子元素（比如 ）没加载或尺寸为 0，网格布局依然稳定。
注意：Safari 15.4+、Chrome 88+、Firefox 89+ 支持；旧版需降级处理。若必须兼容 Safari 15.3 及更早版本，得配合 padding-top + position: relative/absolute 回退。
常见错误是只给 设 width: 100%; height: 100%，但父容器没约束比例，结果拉伸变形或留白错乱。
Grid 容器设置要避开 grid-auto-rows 硬编码高度
用 grid-auto-rows: 200px 或类似固定值会破坏比例响应性——屏幕变窄时，列数减少，但每行高度仍死锁，导致视频被裁剪或留大片空隙。
正确做法是让行高由子项自身比例驱动：
- 用
grid-template-rows: repeat(auto-fill, minmax(0, 1fr)))配合子项aspect-ratio，让 Grid 自动按内容“挤出”合理行高 - 或直接省略
grid-template-rows，靠grid-auto-rows: 1fr+ 子项min-height: 0防止 Grid 膨胀（尤其在 flex/grid 嵌套时） - 避免对 Grid 容器设
height，否则可能触发滚动或压缩
即使容器有 aspect-ratio: 16 / 9， 默认会按原始分辨率渲染，可能溢出或居左不居中。
关键配置：
-
width: 100%; height: 100%让视频填满容器 -
object-fit: cover保持比例并裁剪多余部分（推荐）；用contain会留黑边 -
vertical-align: top消除作为行内元素的基线间隙 - 若需点击播放，加
cursor: pointer和user-select: none
别忘了加 controls 属性或自定义控件——否则用户看不到任何交互提示。
响应式断点下保持比例不崩塌
当屏幕宽度变化导致列数改变（如从 4 列 → 2 列 → 1 列），如果只靠 aspect-ratio，单列时容器会过宽，视频横向拉长。这时需结合媒体查询动态调整列数和间距：
- 用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))))替代固定列数，让 Grid 自适应 - 在小屏下减小
gap（如从1rem改为0.5rem），避免空白占比过高 - 对移动端可加
max-width: 100vw到容器，防止 Grid 容器超出视口
容易忽略的是：视频封面图或占位符若用 background-image，也得同步设 aspect-ratio，否则加载前网格跳动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
