代码之家 › 专栏 › 技术社区 › user2024080

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

grid-area grid css

0

user2024080 · 技术社区 · 4 年前

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

这里怎么了?或者如何解决这个问题?请通过调整其大小来签入整版。

0 回复 | 直到 4 年前

1

the Hutt 4 年前

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

网格模板行、网格模板列和 网格模板区域 共同定义 显式网格 通过指定网格容器的显式网格轨迹来创建网格容器。由于网格项位于显式网格之外,最终网格可能会变大;在这种情况下 将创建隐式轨迹 ,这些隐式轨迹的大小将由“栅格自动行”和“栅格自动列”属性决定。

“栅格自动流动”特性控制栅格项目的自动放置,而无需明确的位置。一旦显式栅格被填充(或者如果没有显式栅格),自动放置也会导致生成隐式栅格轨迹。

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

2

1

A Haworth 4 年前

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