媒体查询无法在响应式网页设计中使用网格

用于页面上的CSS以不同的视口大小显示网格元素根据视口大小显示网格及其后代的代码。如果屏幕的大小变小，那么根据屏幕的大小，列应该放下，并为每个容器以移动模式获取单行。如果是平板模式，主要和侧边栏应该从第二排降到第三排。在页面上使用的提前，以显示不同的视口大小格子元素媒体查询无法在响应式网页设计中使用网格

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

请帮助.....感谢

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

Codepen

来源

2017-10-09 ManishChahal

到目前为止，您尝试过哪些方法无效？ –