应使用 auto-fit 配合 grid-auto-rows 控制轨道高度，而非 auto-fill 加 aspect-ratio；因 auto-fill 强制预留空列导致高度计算失准，而 auto-fit 合并空列并配合固定行高（如 minmax(0, 180px)）可确保视频均匀填满且比例稳定。
别用 auto-fill 做视频画廊——它会让高度忽高忽低，16:9 只是假象。 真正能稳住比例又自适应的方案，得用 auto-fit 配合轨道高度控制，而不是靠 aspect-ratio 或子元素自适应。
为什么 auto-fill + aspect-ratio 会失守视频高度
常见写法：grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))，再给 video 加 aspect-ratio: 16/9。问题在于：1fr 按剩余空间均分宽度，但高度由内容撑开，aspect-ratio 只约束宽高比，不锁死绝对高度。结果就是：同一行里视频宽度不同（因列宽随容器变化），导致高度被反复重算，上下跳动。
-
auto-fill强制预留所有可能列轨道，哪怕没内容，空列也占位，进一步干扰 Grid 行高计算 - 浏览器对
aspect-ratio的实现仍依赖子元素渲染流，在 Grid 中优先级低于轨道尺寸 - 加
max-height会和aspect-ratio冲突，出现上下黑边（截至 2026 年 5 月，Safari 和 Chrome 均未修复该组合 bug）
改用 auto-fit + grid-auto-rows 控制物理高度
把高度控制权从视频元素手里收回来，交给 Grid 轨道本身。关键不是“让视频自己保持比例”，而是“让每行轨道固定高度，再让视频填满它”。
- 先按目标宽度反推高度：比如你期望最小列宽 320px → 对应高度为
320 * 9 / 16 = 180px，于是设grid-auto-rows: minmax(0, 180px) - 容器写成：
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))—— 注意是auto-fit，空列会被合并，列宽真正均分 - 视频样式统一：
width: 100%; height: 100%; object-fit: cover;，禁用aspect-ratio和max-height - 若需响应更精细（如小屏下缩到 240px 宽），可配合 CSS 变量 +
calc()：grid-auto-rows: calc(var(--col-width) * 9 / 16)，再用媒体查询更新--col-width
auto-fill 在什么场景还能用？
仅当你要模拟“固定网格坐标系”的布局时才考虑 auto-fill，比如视频时间轴预览、带编号的帧采样面板——这些场景需要空白格子占位来维持行列索引一致性。
- 必须显式设
grid-auto-flow: row dense防止空轨道错位 - 需搭配
grid-column: span X手动控制跨列，否则空轨道会导致后续项偏移 - 移动端慎用：iOS Safari 15.4 以下版本对
auto-fill+minmax()的轨道计数有偏差，容易漏列
最易被忽略的一点：Grid 的自适应行为完全依赖父容器的**确定内联尺寸**。如果视频画廊容器被套在 display: flex 且未设 width 的父级里，auto-fit 就会失效——它连“可用宽度”都拿不到，更别说算列数了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
