Tab切换时内容区域不重排、不跳动的关键是用grid-template-rows: 1fr让内容区自动伸缩，激活面板设display: block并用display: none隐藏非激活项，键盘操作需JS绑定keydown事件并管理焦点，IE11需降级为flex方案。
Tab切换时内容区域不重排、不跳动
网格布局下，grid-template-rows 写死会导致新内容高度变化时父容器不自适应，视觉上“跳一下”。必须让内容区域撑开自身高度，而不是靠 grid-auto-rows 或固定行高硬控。
- 用
grid-template-rows: 1fr替代grid-template-rows: 200px，让内容区自动伸缩 - 确保每个 tab 面板都设
display: contents是错的——它会剥离自身盒模型，导致 grid 子项丢失；应保持display: block或默认值 - 若内容含图片或异步加载文本，需监听
resize或用ResizeObserver触发重绘（但多数场景只需 CSS 解决）
多个Tab面板共用同一网格容器时的定位冲突
当所有 .tab-panel 都作为同一 grid 的直接子元素，又用 grid-column / grid-row 定位，容易互相覆盖或错位。这不是语义问题，是网格轨道分配逻辑被误用。
- 只让当前激活的面板参与布局：用
.tab-panel:not(.active) { display: none }，而非visibility: hidden或opacity: 0 - 避免给非激活面板设
grid-area——即使隐藏了，它仍占据网格轨道，影响grid-auto-flow行为 - 如果必须保留所有面板可见（比如做淡入淡出），改用
position: absolute脱离文档流，再用z-index控制层级，别硬塞进同一个 grid 容器
键盘操作（Tab/Enter）无法触发网格内Tab切换
CSS Grid 本身不提供交互逻辑，tabindex 和事件绑定全靠 JS。但很多人只加了样式，忘了把 button 或 role="tab" 元素真正接入可访问流程。
-
role="tab"必须配aria-controls="panel-id"，对应面板要加role="tabpanel"和id="panel-id" - 用
keydown监听ArrowLeft/ArrowRight，别只依赖click—— 屏幕阅读器用户不会点鼠标 - 切换后必须调用
element.focus()到新面板，否则焦点卡在旧按钮上，键盘流中断 - 别在
grid容器上写tabindex="0"—— 它不是可交互控件，会破坏 tab 顺序
IE11 下网格Tab完全不工作
IE11 的 display: grid 缺少对 grid-template-areas、gap、subgrid 的支持，且不识别 display: contents。强行降级会引发布局坍塌，尤其当 tab 面板用了 grid-column: span 2 这类现代语法时。
立即学习“前端免费学习笔记（深入）”；
- 检测
CSS.supports('display', 'grid')，不支持则 fallback 到flex+max-height动画方案 - 避免用
grid-area命名区域，IE11 不解析；改用grid-column-start+grid-column-end等基础属性 -
gap必须转成margin，且注意 flex 方案中margin在 IE11 有双倍边距 bug，得用padding+box-sizing: border-box绕开
网格 Tab 最难的不是写样式，是让“显示/隐藏”这个动作和网格的自动布局逻辑不打架。很多人卡在面板高度突变或键盘焦点丢失，其实问题不在 grid，而在没想清楚：哪些该由 CSS 控制，哪些必须交还给 JS 管理生命周期。
