如何在網格容器中構建響應式導航菜單？

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"
}

子網格（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;
   }
}

如果屏幕尺寸大於500像素，則@media內的新寬度將替換之前分配的寬度。