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

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中的新寬度將替換以前分配的內容。