グリッドコンテナ内でレスポンシブなナビゲーションメニューを作成するにはどうすればよいですか？

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;}）内に快適に置かれます。

.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に応じて宣言されている：次のようにサブグリッド（NAV）コンテナの

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

CSSは次のようにグリッドコンテナの

CSSである

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

私はこれ、特にgrid-template-areasをいくつか今すぐ進歩することはありません。私はsubgrid containerを完全に取り除かなければならないか、または私が見落としている簡単なステップがあるかどうかはわかりません。

ご協力いただければ幸いです！

Answer 1

全体のレイアウトにCSS Gridを使用することは意味があります。

簡単なナビゲーションメニューにCSSグリッドを使用すると、それは実行可能ですが、過度の動作になる可能性があります。目標を達成するための簡単な方法があります：Flexbox。

もごnavグリッド項目フレックスコンテナください：あなたは次のHTMLナビゲーションバー、例えば

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

：あなたが設定したルールを使用することができ

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

@mediaの新しい幅は、画面サイズが500pxより大きい場合に割り当てられたものを置き換えます。