Grid area with responsive not works as expect-CodePudding

: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.

CodePudding user response：

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

CodePudding user response：

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>