如何在网格容器中构建响应式导航菜单？

Question

我有一个简单的导航

<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

我想在链接根据用户设备调整大小（水平）时做出响应。此导航舒适地位于网格容器的子网格容器中（ .class {display: subgrid;} 未用作其越野车）。

CSS 网格容器如下：

.container {
  grid-template-areas:
  "header header header header"
  "nav nav nav nav"
  "main main main main"
  "footer footer footer footer"
}

CSS 子网格（导航）容器如下：

.ul {
  display: grid;
  grid-template-areas: "home about contact";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 25%;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

相应声明grid-template-areas：

.home {grid-area: home;}
.about {grid-area: about};
.contact {grid-area: contact};

我已经对此进行了修补，尤其是 grid-template-areas，现在有一段时间没有进展。我不确定我是否应该完全放弃 subgrid container，或者我是否忽略了一个简单的步骤。

如有任何帮助，我们将不胜感激！

Answer 1

对整体布局使用 CSS 网格是有意义的。

使用 CSS 网格作为简单的导航菜单，虽然可行，但可能有点矫枉过正。有一种更简单的方法可以实现这个目标：Flexbox。

使您的 nav 网格项目也成为弹性容器：

nav {
  display: flex;
  height: 50px; /* non-essential; for demo only */
}

/* non-essential; for demo only */
a {
  flex: 1;
  border: 1px solid gray;
  background-color: lightgray;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

<nav>
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Contact</a>
</nav>

Answer 2

例如，您使用以下 html 导航栏：

<nav class="nav-menu">
   <a>Item 1</a>
   <a>Item 2</a>
   <a>Item 3</a>
</nav>

您可以使用规则来设置不同的宽度

.nav-menu {
   display: flex;

   a {
      width: 25px;
   }
}

@media screen and (max-width: 500px) {
   .nav-menu a {
      width: 20px;
   }
}

如果屏幕尺寸大于 500px，@media 中的新宽度将替换之前指定的宽度。

如何在网格容器中构建响应式导航菜单？

How do I build a responsive navigation menu within a grid container?

html

css

css-grid