CSS Grid布局下如何动态隐藏未渲染组件对应的grid-template-row网格行？

问题根源 #

你当前的代码存在两个核心冲突/问题：

1. 给.Player设置了position: fixed，意味着该元素已经脱离正常文档流，你写的grid-area: Player属性完全不生效，该元素不会参与网格布局的行列计算
2. 网格模板行是写死的grid-template-rows: 60px 1fr 90px，无论第三行区域内有没有实际内容，都会固定占用90px高度，自然会出现底部空白

解决方案 #

这里提供两种适配方案，按需选择即可：

方案1：保留Player的fixed定位（最适配你现有代码）

既然你已经把Player设为固定定位，完全不需要给网格预留第三行，直接修改父容器的网格配置：

/* 父容器网格配置 */
display: grid;
grid-template-columns:var(--side-bar-width) 1fr;
/* 去掉第三行的固定高度，只保留前两行 */
grid-template-rows: 60px 1fr;
gap: 0px 0px;
grid-template-areas:
    "Sidebar Header"
    "Sidebar Body";

为了避免Player显示时遮挡.Body区域的底部内容，添加以下适配逻辑：

• 当Player渲染时，给.Body或者父容器添加一个标识类，比如has-player
• 配套CSS：

.Body {
  /* 默认没有Player时无需底部内边距 */
  padding-bottom: 0;
}
.has-player .Body {
  /* 显示Player时预留90px底部空间避免遮挡 */
  padding-bottom: 90px;
}

方案2：去掉Player的fixed定位，用原生网格动态适配

如果你希望Player真的纳入网格布局管理，先删除.Player的position: fixed、bottom: 0属性，然后做如下修改：

1. 修改父容器网格行配置，让第三行高度由内容决定：

display: grid;
grid-template-columns:var(--side-bar-width) 1fr;
/* 第三行高度由内部内容自动撑开，无内容时高度为0 */
grid-template-rows: 60px 1fr min-content;
gap: 0px 0px;
grid-template-areas:
    "Sidebar Header"
    "Sidebar Body"
    "Player Player";

2. 给.Player添加空元素隐藏逻辑：

.Player {
  height: 90px;
  display: flex;
  width: 100%;
}
/* 当Player区域无内容时直接隐藏，不占空间 */
.Player:empty {
  display: none;
}

如果是组件条件渲染直接不输出.Player节点的情况，也可以给父容器加player-hidden类动态控制行高：

.parent.player-hidden {
  grid-template-rows: 60px 1fr 0;
  overflow: hidden;
}

内容的提问来源于stack exchange，提问作者Ridhwaan Shakeel