具有回應的網格區域無法按預期作業-有解無憂

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

這里有什么問題？或者如何解決這個問題？請通過調整大小來查看整頁。

uj5u.com熱心網友回復：

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

這三個屬性網格模板行，網格模板列，網格模板區域共同定義明確電網通過指定明確網格軌道網格容器。由于網格專案放置在顯式網格之外，最終網格可能會更大；在這種情況下，將創建隱式軌道，這些隱式軌道的大小由 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;
        }
      }

uj5u.com熱心網友回復：

所有的 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/345051.html

標籤：css 网格网格区域

上一篇：如何增加特異性權重

下一篇：用于將div放置在螢屏居中div中間和螢屏邊緣的CSS