Grid area with responsive not works as expect - css

Question

:root {
--min-screen-height:100px;
}
.App {
display: grid;
grid-template-columns: 0.7fr 0.9fr 1.5fr 0.9fr;
grid-template-rows: 2.75rem 3fr;
grid-template-areas:
'nav nav nav nav'
'sidebar leftmenu content rightmenu';
gap: 0.75rem 0.4rem;
}
.navigation {
grid-area: nav;
background-color: yellow;
}
.sidebar {
min-height: var(--min-screen-height);
grid-area: sidebar;
background-color: aliceblue;
}
.leftmenu {
grid-area: leftmenu;
background-color: skyblue;
}
.content {
min-height: var(--min-screen-height);
grid-area: content;
background-color: blanchedalmond;
padding: 0.5em 0.75em 0.5em 0.75em;
}
.rightmenu {
grid-area: rightmenu;
background-color: coral;
}
#media screen and (max-width: 768px) {
.App {
grid-template-columns: 1fr;
grid-template-areas:
'nav'
'content';
}
}
<div class="App">
<div class="navigation">Nav</div>
<div class="sidebar">Side bar</div>
<div class="leftmenu">Left Menu</div>
<main class="content">Main</main>
<div class="rightmenu">Right Menu</div>
</div>
In responsive until 768px I am only showing the nav and container. But still in the 768 I could see the rightmenu.
what is wrong here? or how to fix this? Please check in full page with by resizing it.

Answer 1

https://www.w3.org/TR/css-grid-2/#explicit-grids
The three properties grid-template-rows, grid-template-columns, and grid-template-areas together define the explicit grid of a grid container by specifying its explicit grid tracks. The final grid may end up larger due to grid items placed outside the explicit grid; in this case implicit tracks will be created, these implicit tracks will be sized by the grid-auto-rows and grid-auto-columns properties.
The grid-auto-flow property controls auto-placement of grid items without an explicit position. Once the explicit grid is filled (or if there is no explicit grid) auto-placement will also cause the generation of implicit grid tracks.
So grid-template-areas defines explicit grid. Remaining areas are put in implicit grid.
To get rid of those elements you may use:
#media screen and (max-width: 768px) {
.App {
grid-template-columns: 1fr;
grid-template-areas: "nav" "content";
}
.App :not(.navigation, .content) {
display: none;
}
}

Answer 2

All the divs are still there so the grid does its best to accommodate them although they say they are in grid-areas which are not defined.
To completely get rid of them you will need to set them to display none in the media query.
:root {
--min-screen-height: 100px;
}
.App {
display: grid;
grid-template-columns: 0.7fr 0.9fr 1.5fr 0.9fr;
grid-template-rows: 2.75rem 3fr;
grid-template-areas: 'nav nav nav nav' 'sidebar leftmenu content rightmenu';
gap: 0.75rem 0.4rem;
}
.navigation {
grid-area: nav;
background-color: yellow;
}
.sidebar {
min-height: var(--min-screen-height);
grid-area: sidebar;
background-color: aliceblue;
}
.leftmenu {
grid-area: leftmenu;
background-color: skyblue;
}
.content {
min-height: var(--min-screen-height);
grid-area: content;
background-color: blanchedalmond;
padding: 0.5em 0.75em 0.5em 0.75em;
}
.rightmenu {
grid-area: rightmenu;
background-color: coral;
}
#media screen and (max-width: 768px) {
.App {
grid-template-columns: 1fr;
grid-template-areas: 'nav' 'content';
}
.sidebar,
.rightmenu,
.leftmenu {
display: none;
}
}
<div class="App">
<div class="navigation">Nav</div>
<div class="sidebar">Side bar</div>
<div class="leftmenu">Left Menu</div>
<main class="content">Main</main>
<div class="rightmenu">Right Menu</div>
</div>