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

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

I have three components, each render a div with a classname of
.Body { ... grid-area: Body; },
.Sidebar { ... grid-area: Sidebar; },
.Player{ ... grid-area: Player; }
respectively

The Player component is a conditional render of height 90px, it is not visible initially so sometimes it looks like the viewport has 90px of empty space at the bottom of the screen at page load

The Player component/content belongs to the Player grid-area. How do you hide the grid-area with empty content dynamically in the grid template? Hiding could mean min-height 0 or display none

In other words, i want to show/hide the last grid-template-row if Player component was rendered then adjust the grid to fill screen

I also saw CSS Grid. Hide unused area & Preventing fixed footer from overlapping content

update:
The Player css has these additional attributes

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

Don't define the third row, you're forcing the 90px empty space instead define it as `grid-auto-rows: 90px;` — Rainbow, May 22 '21 at 17:13
Seems like you updated your question. See my updated answer. — Michael Benjamin, May 22 '21 at 17:31

Michael Benjamin · Accepted Answer · 2021-05-22T17:31:02.537

1

Updated Answer (based on changes to the question)

If the Player grid area must be explicitly defined, then change its row in grid-template-rows to auto or min-content. You can then define the height in the component itself (i.e., height: 90px).

Original Answer

Consider leaving the Player component out of the explicit grid. In other words, don't define it in grid-template-areas or grid-template-rows.

Use grid-auto-rows: 90px.

If necessary, apply grid-row: 3 to the component.

Or even grid-area: 3 / 1 / auto / -1, which is equivalent to:

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

edited May 22 '21 at 17:31

answered May 22 '21 at 17:14

Michael Benjamin

346,931
104
581
701

I removed `Player` from `grid-template-areas` and `grid-template-rows`, then I added `grid-auto-rows: 90px` to it. It is not working, what's happening is that explicit grid-template-area is not refreshing to show the new additional bottom row instead the `Player` div is rendered and it **overlaps** the bottom `90px` of the last grid-template-row (`Sidebar` and `Body` divs). maybe it is because the `Player` div has attributes `{ position: fixed; bottom: 0;}` ? – Ridhwaan Shakeel May 22 '21 at 18:20
update: I changed `Player` `position: fixed` to `position: sticky` and it works as expected. `grid-area: 3 / 1 / auto / -1` was needed. thanks a lot for your help – Ridhwaan Shakeel May 22 '21 at 18:35
When you apply absolute positioning to a grid (or flex) item — `position: fixed` is a form of absolute positioning — it removes the item from the normal flow of the document. Essentially, it removes it from grid layout and surrounding items don't recognize its existence (hence the overlaps). https://www.w3.org/TR/css3-grid-layout/#static-position – Michael Benjamin May 22 '21 at 18:42

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

1 Answers1