应设grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))，240px为封面加标题预留最小宽度，避免小屏挤压；配合aspect-ratio: 16/9、object-fit: cover及overflow: hidden确保图文不溢出、不变形。
grid-template-columns 怎么设才不挤标题
视频封面宽高比通常是 16:9，标题文字长度不一，如果直接用 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，小屏下标题会被强制换行甚至截断。关键不是列数，而是让每项内容（图+标题）有独立的最小宽度余量。
推荐写法：grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) —— 240px 是封面（160px × 90px）加左右 padding + 标题预留空间的保守值；minmax() 保证大屏能均分，小屏也不小于 240px 避免挤压。
- 若封面是响应式图片（如
img { width: 100%; aspect-ratio: 16/9; }），必须给容器设overflow: hidden，否则长标题撑开容器导致网格错位 - 避免用
fr单独做列宽（如1fr 1fr），它不约束最小内容宽度，标题超长时会拉伸整列 - 移动端可加
@media (max-width: 480px) { grid-template-columns: 1fr; }强制单列，比 JS 切换更可靠
grid-row-gap 和 line-height 冲突导致行距忽大忽小
设置 grid-row-gap: 16px 后，某些项的垂直间距看起来比预期大，尤其是标题两行时。这是因为 line-height 的基线对齐机制和 Grid 的行盒计算方式叠加了。
根本解法是统一控制内容块高度：给每个网格项（.video-item）设 display: flex; flex-direction: column;，再用 gap: 8px 管理内部图与标题间距，外部 grid-row-gap 只负责项与项之间距离。
- 不要依赖
margin-bottom模拟行距，Grid 会把它算进项高度，导致 gap 叠加 - 标题用
line-clamp: 2时，需配合display: -webkit-box，否则在 Firefox 中可能失效 -
grid-row-gap值建议用偶数（8/12/16），避免和字体行高（常为 1.2–1.5）产生像素级错位
cover 图片被拉伸或留白——aspect-ratio 还是 object-fit？
直接设 width: 100%; height: 100% 会让封面变形；只设 width: 100% 又可能高度不一致，破坏网格对齐。
现代方案优先用 aspect-ratio: 16/9 + object-fit: cover：img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }。这样无论原始图比例如何，都能填满且不畸变。
- 旧浏览器（如 Safari aspect-ratio，需回退到 padding-top 百分比技巧：父容器
position: relative，伪元素::before { padding-top: 56.25%; }，图片绝对定位覆盖 - 慎用
object-fit: contain，它会留白，导致网格项高度不一致，触发 Grid 重排 - 如果封面来自 CMS 且尺寸极不统一，可在后端统一裁剪为 320×180，前端用固定尺寸 +
object-fit更稳
标题文字截断后 hover 展开——Grid 下的 overflow 处理
想实现「默认显示两行，hover 显示全部」，但直接在 Grid 项里设 overflow: hidden + height: auto 会破坏 Grid 行高计算，造成跳动。
正确做法是放弃控制高度，改用 line-clamp 并仅在 hover 时取消：
.video-item h3 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.video-item:hover h3 {
-webkit-line-clamp: unset;
}
注意：Firefox 目前不支持 -webkit-line-clamp，需用 JavaScript 检测并 fallback 到 JS 截断逻辑，或接受其原生不截断。
- 别用
max-height+transition，Grid 容器不会重绘，动画会卡顿或失效 - 如果必须兼容老浏览器，可用
clamp()控制字体大小（如font-size: clamp(0.875rem, 4vw, 1rem)），让长标题自动缩放而非换行 - hover 效果要加
will-change: contents提升性能，尤其列表项多时
align-items 默认值（stretch）——它会让所有项高度拉齐，而封面图若加载慢或失败，空白区域会撑高整个网格行。务必设 align-items: start，再用内部 flex 控制对齐。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
