grid容器必须设display: grid且显式定义grid-template-columns，否则仅为单列空壳；视频列表应使用repeat(auto-fit, minmax(280px, 1fr))实现自适应，避免固定列数或grid-auto-columns，并配合aspect-ratio、禁用子项width以确保布局稳定。
Grid容器必须设为display: grid且定义列轨道
不写grid-template-columns，grid就只是个空壳，不会自动分列。视频列表要自适应，不能写死像素值，得用repeat()配合minmax()和auto-fit或auto-fill。
常见错误是只写grid-template-columns: repeat(3, 1fr)——这固定三列，缩放时要么溢出要么留白；或者写grid-auto-columns: 300px——它只影响未显式定义的列，对主轨道无效。
推荐写法：
video-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
280px是单个视频卡片最小宽度（含封面+标题），1fr让剩余空间均分。浏览器会根据容器宽度尽可能塞进更多列，不足一列宽度时自动回退为单列。
视频卡片内部结构需避免width: 100%破坏Grid约束
Grid靠容器控制列宽，卡片子元素若强行设width: 100%，尤其在图片或video标签上，容易撑破网格项、触发横向滚动或错位。
正确做法是让卡片内容自然流式响应：
-
img或video加width: 100%; height: auto;，并确保父容器有明确高度上下文（如aspect-ratio: 16/9） - 标题等文字用
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;防换行撑高 - 避免给卡片本身设
width或max-width，让它完全由Grid轨道决定尺寸
响应断点不是必须的，但小屏下需重置gap和minmax()下限
纯auto-fit + minmax()能在大多数视口工作，但在手机竖屏（比如375px宽）下，280px下限会让卡片挤压内容、文字折行难看。
这时用媒体查询微调更稳妥：
@media (max-width: 480px) {
.video-grid {
grid-template-columns: 1fr;
gap: 12px;
}
}
注意：不要在@media里重复写display: grid，也不要用grid-template-columns: repeat(1, 1fr)——直接1fr更简洁。同时把gap从16px收窄到12px，适配小屏触摸精度。
IE11不支持auto-fit，真要兼容就得换方案
如果项目仍需支持IE11，auto-fit和minmax()都会失效，整个Grid布局会坍缩成单列或报错。
可行的降级路径只有两个：
- 用
grid-template-columns: repeat(4, 1fr)+ 媒体查询逐级减少列数（如768px下改repeat(2, 1fr)），但列数固定，不够“自适应” - 彻底放弃Grid，退回
flex-wrap+flex-basis，用JavaScript监听resize动态计算列数（成本高，一般不值得）
绝大多数现代项目已无需考虑IE11，但如果构建系统里开了Autoprefixer且目标浏览器包含ie >= 11，记得检查生成的CSS是否被悄悄注释掉Grid新特性——这是最容易被忽略的线上故障点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
