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";
I have three components, each rendering a div with a classname of
.Body { ... grid-area: Body; },
.Sidebar { ... grid-area: Sidebar; }.Player{ ... grid-area: Player; }respectively
The Player component is conditionally rendered with a height of 90px. It may not be visible initially, causing the viewport to appear as if there is 90px of empty space at the bottom of the screen upon page load.
The content of the Player component belongs to the Player grid-area. How can you dynamically hide the grid area when it contains empty content in the grid template? This could involve setting a minimum height of 0 or hiding it using display none
In simple terms, I want to show/hide the last row of the grid template based on whether the Player component was rendered, and then adjust the grid layout accordingly to fill the screen
I also came across discussions on hiding unused areas in CSS Grid & preventing fixed footers from overlapping content
Update:
Additional attributes for the Player css are as follows:
.Player {
...
height: 90px;
display: flex;
width: 100%;
position: fixed;
bottom: 0;
}