推荐用 minmax(320px, 1fr) minmax(240px, 2fr) 实现响应式 Grid 布局，配合 aspect-ratio、object-fit 和 align-self 等控制视频比例、列表高度及触摸行为。
左侧视频区域固定宽度，右侧列表自适应布局
Grid 的 grid-template-columns 是关键。不能写死像素值（比如 320px 1fr），否则小屏下左侧会撑破容器。推荐用 minmax() + fr 组合：grid-template-columns: minmax(320px, 1fr) minmax(240px, 2fr)。这样在宽屏时左侧占 1 份、右侧占 2 份；窄屏时左侧缩到最小 320px，右侧至少留 240px，避免文字挤成一团。
常见错误是直接写 320px 1fr —— 小屏下左侧仍强行占 320px，右侧可能只剩几像素，列表项文字换行错乱甚至溢出。
- 如果视频容器本身有 padding/margin，记得用
box-sizing: border-box避免尺寸叠加偏差 - 右侧列表项用
display: contents或grid-row: span 1控制高度一致性，防止某条标题过长拉高整行 - 移动端可加
@media (max-width: 768px)改为grid-template-columns: 1fr，让视频和列表垂直堆叠
视频区域保持 16:9 比例且不拉伸变形
直接设 width 和 height 会导致不同屏幕比例下黑边或裁切。正确做法是用 aspect-ratio: 16 / 9（现代浏览器支持），并配合 object-fit: cover 确保内容填满且不失真。
兼容旧版浏览器（如 Safari 15.3 以下）需降级：用伪元素 + padding-top: 56.25% 做响应式宽高比容器，再把 <video></video> 绝对定位进去。注意此时必须给父容器 position: relative，否则视频会脱离 Grid 流。
立即学习“前端免费学习笔记（深入）”；
- 别对
<video></video>元素本身设height: 100%，它会忽略aspect-ratio，导致拉伸 - 若用
object-fit: contain，需额外加背景色或阴影，否则上下/左右留白太明显 - 某些安卓 WebView 对
aspect-ratio支持不稳定，建议加min-height: 0防止 Grid 轨道高度计算异常
右侧列表动态渲染时 Grid 行高自动适配
列表项数量变化时，Grid 默认不会重排行高——尤其当某项含多行标题或描述文本时，容易撑开整行，影响视频区域对齐。解决核心是控制 grid-auto-rows 和子项的 align-self。
设 grid-auto-rows: minmax(min-content, max-content)，让每行根据内容最小高度展开，但不强制统一高度；同时给列表项加 align-self: start，避免被父轨道居中拉高。
- 如果列表项用了
flex布局，检查是否意外触发了align-items: stretch，这会让子项撑满 Grid 行高 - 动态插入新项后，不要手动调
grid-row，Grid 会自动按源顺序排列；除非需要跨行，否则别用grid-row-start干预 - Chrome 110+ 中
grid-auto-rows: auto行为有变更，建议显式写minmax(min-content, max-content)更稳妥
触摸设备上点击列表项时焦点与滚动行为冲突
在 iOS Safari 或 Android Chrome 上，点击右侧列表项触发播放切换时，页面常意外滚动，尤其是列表内容超出视口。这不是 Grid 问题，而是 :focus 样式 + scrollIntoView() 默认行为叠加导致。
解决方案分两步：一是移除列表项的 tabindex（除非真需键盘导航），避免聚焦触发滚动；二是用 event.preventDefault() 拦截点击事件的默认滚动链，再手动控制播放逻辑。
- 如果保留
tabindex，务必加outline: none并提供替代焦点样式（如box-shadow: 0 0 0 2px #007bff），否则无障碍访问失效 - 不要对整个列表容器设
overflow-y: auto后再依赖scrollIntoView({ block: 'nearest' })，Grid 容器内滚动锚点易偏移 - 部分安卓机型对
touch-action: manipulation支持不全，建议在列表项上加该声明，减少 300ms 延迟带来的误判
border: 1px solid rgba(0,0,0,0.1) 而非纯黑，并避免用 transform: scale() 缩放视频区域。 
