Show/hide grid-template-row 内容为空或网格区域未呈现

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";

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

Player 组件是一个高度为 90px 的条件渲染，它最初是不可见的，所以有时看起来在页面加载时视口在屏幕底部有 90px 的空白 space

Playercomponent/content属于Playergrid-area。如何在网格模板中动态隐藏内容为空的网格区域？隐藏可能意味着 min-height 0 或显示 none

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

我也看到了 & Preventing fixed footer from overlapping content

更新：
玩家 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

Show/hide grid-template-row 内容为空或网格区域未呈现

Show/hide grid-template-row of empty content or if grid area not rendered

css

show-hide

reactjs

css-grid