不能直接用 grid-template-rows 切换 Tab 内容，因其仅定义轨道而非控制显隐；应由 display/visibility/inert 等机制配合 Grid 布局实现，结构上用 tab-container + tab-content 分离布局与状态。
直接用 grid-template-rows 切换 Tab 内容？不现实
浏览器不支持靠修改 grid-template-rows 值来驱动 Tab 切换——它只是定义轨道数量和尺寸，不是状态控制器。强行用 JS 动态改这个值，既难维护，又会破坏 Grid 的隐式行生成逻辑，还可能触发重排抖动。真正能“快速构建”的路径，是把 Grid 当布局引擎，用其他机制控制显隐。
Tab 切换该用什么控制显隐
Grid 容器负责整体结构（比如标题行 + 内容区），但每块 Tab 内容的显示/隐藏，得靠更轻量、语义明确的方式：
-
display: none/display: grid：最直白，兼容性好，但切换时有重排开销 -
visibility: hidden+opacity: 0：保留占位，适合带过渡动画的场景 -
inert属性（现代浏览器）：配合aria-hidden="true"，语义清晰且无障碍友好 - 用
:checked+~或+选择器纯 CSS 切换（需配合<input type="radio">）：零 JS，但结构受限
Grid 容器怎么搭才利于 Tab 扩展
关键不是“怎么切”，而是“怎么让切换后的内容稳稳落在正确位置”。推荐结构：
<div class="tab-container">
<div class="tab-header">
<button data-tab="1">首页</button>
<button data-tab="2">关于</button>
</div>
<div class="tab-content">
<section class="tab-panel" data-tab="1">首页内容</section><section class="tab-panel" data-tab="2">关于内容</section>
</div>
</div>
对应 Grid 布局只需两行：
.tab-container {
display: grid;
grid-template-rows: auto 1fr;
gap: 1rem;
}
.tab-content {
display: grid;
grid-auto-rows: 1fr;
}
-
grid-template-rows: auto 1fr把 header 和 content 区域高度分离，header 自适应，content 占满剩余空间 -
grid-auto-rows: 1fr在.tab-content内确保每个.tab-panel都按需撑高，避免内容被截断 - 所有
.tab-panel默认display: none，激活时切为display: block或grid即可，Grid 不干涉显隐逻辑
容易被忽略的细节：overflow 和 z-index
Tab 内容区常加 border-radius 和 box-shadow，但一加就发现圆角被裁、阴影消失——大概率是 .tab-content 或其父容器设了 overflow: hidden，而 .tab-panel 又没约束自身尺寸。解决方法很具体：
- 删掉
.tab-content的overflow: hidden，改用overflow-y: auto控制滚动 - 给
.tab-panel加min-height: 0，防止 Flex/Grid 子项在收缩时塌陷导致内容溢出 - 如果用了
z-index分层（比如下拉菜单盖在 Tab 上），确认.tab-panel没意外创建新层叠上下文（如transform、opacity ）
Grid 本身不处理显隐，也不管圆角是否显示；它只管“把东西放哪”，剩下的得靠显隐策略和盒模型细节兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
