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;}没有用作它的buggy）。

网格容器的CSS如下：

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

子网格（nav）容器的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 Grid进行整体布局是有道理的。

使用CSS Grid作为简单的导航菜单，尽管它可行，但可能有点过分。有一种更简单的方法来实现目标：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内的新宽度将取代之前指定的宽度。

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

2 个答案: