grid-template-areas 更适合视频列表布局，因其用可读字符串定义语义区域（如"cover title"），便于响应式重组；需换行分隔、单词数对齐、用.占位，子元素须匹配grid-area名。
grid-template-areas 为什么比 grid-template-columns 更适合视频列表布局
因为视频列表里封面图、标题、时长、作者这些元素语义固定，且不同断点下区域重组频繁。grid-template-areas 能用可读性高的字符串直接定义“哪块放封面、哪块放标题”，比纯数字列宽更直观，也更容易响应式切换。
常见错误是把 grid-template-areas 写成单行字符串（如 "cover title time"），结果所有项挤在同一行——它本质是按换行切分的二维结构，必须每行代表一行网格：
grid-template-areas: "cover title" "cover time";
- 每个引号内单词数 = 该行列数，单词重复表示跨列（如
"cover cover"） - 所有行单词数必须一致，缺位用
.占位（"cover ."表示第一列有内容、第二列留空） - 对应子元素必须设
grid-area: cover等名称，名称不匹配就完全不生效
cover 图片如何在 grid 中保持 16:9 且不拉伸变形
Grid 容器本身不控制子元素宽高比，靠 aspect-ratio: 16 / 9 最直接。但老版本 Safari 不支持，得用 padding-bottom hack 配合绝对定位，此时必须确保父容器 position: relative，且图片设为 position: absolute; top: 0; left: 0; width: 100%; height: 100%。
容易踩的坑是给 <img alt="CSS网格实现的自适应视频列表_封面图与标题的结构化排版" > 直接设 width: 100%; height: 100%——这会让图片强行填满，失去原始比例。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 容器（比如
div.cover）设aspect-ratio: 16 / 9或 padding-bottom 方案 -
<img alt="CSS网格实现的自适应视频列表_封面图与标题的结构化排版" >设width: 100%; height: auto; object-fit: cover - 避免对
<img alt="CSS网格实现的自适应视频列表_封面图与标题的结构化排版" >同时设宽高，否则object-fit失效
标题文字过长时的截断与兼容处理
视频标题常含中英文混合、emoji，用 text-overflow: ellipsis 截断需同时满足三个条件：块级、定宽、溢出隐藏。Grid 中最稳妥的是给标题容器加 min-width: 0（防止 flex/grid 默认最小宽度撑开）。
常见错误是只写 white-space: nowrap，结果多行标题直接溢出容器。实际场景中标题可能两行，推荐：
- 单行截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis - 两行截断：用
-webkit-line-clamp: 2（注意仅 WebKit 有效，Firefox 需额外 JS 或display: -webkit-box） - 避免对
grid-area元素直接设max-width，优先用grid-column: span 2控制占位，再内部约束
移动端小屏下 grid-area 重排的最小改动方案
小屏时通常要把 “封面+标题+信息” 从横向变成纵向堆叠，不用重写 HTML，只需媒体查询里改 grid-template-areas 和列数。关键点是：别动子元素的 grid-area 值，只改容器的模板定义。
例如桌面端三列：
@media (max-width: 768px) {
.video-list {
grid-template-areas:
"cover"
"title"
"time"
"author";
}
}
- 原
grid-area: cover的元素会自动落到新模板的第一行，无需修改 - 如果某些区域在小屏不需要（比如作者），模板里直接删掉那行，对应元素会塌陷到剩余区域末尾
- 慎用
grid-auto-flow: dense，它可能导致区域顺序错乱，尤其当部分元素display: none时
真正难的不是写几行 CSS，而是想清楚哪些区域在不同尺寸下必须保留视觉权重——比如封面永远不能被折叠，而时长和作者可以合并成一行。这种判断没法靠工具自动生成，得盯着真实数据调。
