具有响应性的网格区域无法按预期工作

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>

响应直到768px 我只显示nav 和container。但仍然在768 我可以看到rightmenu。

这里有什么问题？或者如何解决这个问题？请通过调整大小来查看整页。

Answer 1

https://www.w3.org/TR/css-grid-2/#explicit-grids

grid-template-rows、grid-template-columns 和 grid-template-areas 这三个属性共同定义了一个网格容器的显式网格，通过指定其显式网格轨迹。由于放置在显式网格之外的网格项，最终网格可能会变大；在这种情况下将创建隐式轨道，这些隐式轨道将由 grid-auto-rows 和 grid-auto-columns 属性调整大小。

grid-auto-flow 属性控制网格项的自动放置，无需明确位置。一旦显式网格被填充（或者如果没有显式网格），自动放置也会导致隐式网格轨迹的生成。

所以grid-template-areas 定义了显式网格。其余区域被置于隐式网格中。
要摆脱这些元素，您可能会使用：

      @media screen and (max-width: 768px) {
        .App {
          grid-template-columns: 1fr;
          grid-template-areas: "nav" "content";
        }
        .App :not(.navigation, .content) {
          display: none;
        }
      }

Answer 2

所有 div 仍然存在，因此网格会尽力容纳它们，尽管它们说它们位于未定义的网格区域中。

要完全摆脱它们，您需要将它们设置为在媒体查询中不显示。

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