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

Question

我有一个简单的导航

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

，我想其中的链接调整（水平）基于用户设备上响应。这个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的子网格（NAV）容器如下：

.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 Grid作为简单的导航菜单虽然可行，但可能会过度。有一个更简单的方法来实现这个目标：Flexbox。

让您nav电网项目还Flex容器：

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中的新宽度将替换以前分配的内容。