显示/隐藏空内容的网格模板行或网格区域未呈现

Question

    display: grid;
    grid-template-columns:var(--side-bar-width) 1fr;
    grid-template-rows: 60px 1fr 90px;
    gap: 0px 0px;
    grid-template-areas:
        "Sidebar Header"
        "Sidebar Body"
        "Player Player";

我有三个组件，每个组件都渲染一个类名为
.Body { ... grid-area: Body; },
.Sidebar { ... grid-area: Sidebar; },
.Player{ ... grid-area: Player; }
的div 分别

Player 组件是高度为 90 像素的条件渲染，最初它是不可见的，因此有时看起来视口在页面加载时屏幕底部有 90 像素的空白空间

Player 组件/内容属于Player grid-area。如何在网格模板中动态隐藏内容为空的网格区域？隐藏可能意味着最小高度 0 或不显示

换句话说，如果播放器组件被渲染，我想显示/隐藏最后一个网格模板行，然后调整网格以填充屏幕

我也看到了CSS Grid. Hide unused area & Preventing fixed footer from overlapping content

更新：
Player css 有这些附加属性

.Player {
    ...
    height: 90px;
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0;
}

Answer 1

更新答案（基于问题的更改）

如果必须明确定义播放器网格区域，则将其在grid-template-rows 中的行更改为auto 或min-content。然后，您可以在组件本身中定义高度（即，height: 90px）。

---

原答案

考虑将 Player 组件排除在显式网格之外。换句话说，不要在grid-template-areas 或grid-template-rows 中定义它。

使用grid-auto-rows: 90px。

如有必要，将grid-row: 3 应用于组件。

甚至grid-area: 3 / 1 / auto / -1，相当于：

• grid-row-start: 3
• grid-column-start: 1
• grid-row-end: auto
• grid-column-end: -1