グリッドを使用したレスポンシブウェブデザインでメディアクエリが機能しない

異なるビューポートサイズのグリッド要素を表示するためにページに使用されるCSS ビューポートのサイズに基づいてグリッドとその子孫を表示するコード。画面のサイズが画面のサイズに基づいて小さくなる場合、各コンテナの列はドロップされ、モバイルモードでは単一の行が取得されます。タブレットモードの場合、メインとサイドバーは2行目から3行目にドロップする必要があります。グリッドを使用したレスポンシブウェブデザインでメディアクエリが機能しない

body{ 
    margin: 0; 
    padding: 0; 
} 

.gridContainer{ 
    display: grid; 
    height: 100%; 

    grid-template-columns: 20% 1em 1fr 1em 20% ; 
     grid-template-rows: 4.4em 1em 1fr 1em 4.4em; 
    grid-template-areas: "header header header header header" 
     ". . . . ." 
     "navigation . mainContent . sidebar" 
     ". . . . ." 
     "footer footer footer footer footer"; 
} 
.gridHeader{ 
    grid-area: header; 
    background-color: #A62E5C; 
} 

.gridFooter{ 
    grid-area: footer; 
    background-color: #A62E5C; 
} 

.gridNav{ 
    grid-area: navigation; 
    background-color: #9BC850; 
} 

.gridMain{ 
    grid-area: mainContent; 
    background-color: #9BC850; 
} 

.gridSide{ 
    grid-area: sidebar; 
    background-color: #9BC850; 
} 

.grid-item { 
    color: #fff; 
    box-sizing: border-box; 
    font-size: 1em; 
    padding: 1em; 
    overflow: hidden; 
    text-align: center; 
} 

@media screen and (max-width: 768px) { 

    .grid-container { 
     grid: 1fr 1em 30%/4.4em 1em 3.6em 1em 1fr 1em 4.4em; 
     grid-template-areas: 
     "header header header" 
     ". . ." 
     "navigation navigation navigation" 
     ". . ." 
     "content . sidebar" 
     ". . ." 
     "footer footer footer"; 
    } 

} 

@media screen and (max-width: 480px){ 
    .gridContainer{ 
     grid: 1fr/3.6em 1em 4.6em 1em 1fr 1em 4.6em 1em 3.6em; 
     grid-template-areas: "header" 
      "." 
      "navigation" 
      "." 
      "mainContent" 
      "." 
      "sidebar" 
      "." 
      "footer"; 
    }  
}

HTMLは、異なるビューポートのサイズ

<html> 
    <head> 
     <meta name="viewport" content="width=device-width,initial-scale=1"> 
     <title> 
      Modern Web Layout 
     </title> 
     <link rel="stylesheet" href="css/main.css" type="text/css"> 
    </head> 
    <body> 
     <main class="gridContainer"> 
     <header class="gridHeader grid-item"> 
      HEADER 
     </header> 
      <section class="gridNav grid-item"> 
       NAVIGATION AREA 
      </section> 
      <section class="gridMain grid-item"> 
       MAIN CONTENT 
      </section> 
      <section class="gridSide grid-item"> 
       SIDEBAR 
      </section> 
      <footer class="gridFooter grid-item"> 
       FOOTER 
      </footer> 
     </main> 
    </body> 
</html>

にグリッド要素を表示するページで使用助けてください.....おかげで、事前

Codepen

出典

2017-10-09 ManishChahal

これまでに何を試みていないのですか？ –