CSS Grid with Media Queries

/* ===================================== 
    Grid Layout
 ======================================== */
 .container {
   height: 100vh;
   display: grid;
   grid-template-columns: 1fr;
   grid-auto-rows: minmax(150px, auto);
   grid-gap: 10px;
   grid-template-areas: 
     "header"
     "nav"
     "main"
     "aside"
     "footer";
 }
 header {
   grid-area: header;
 }
 nav {
   grid-area: nav;
 }
 main {
   grid-area: main;
 }
 aside {
   grid-area: aside;  
 }
 footer {
   grid-area: footer;
 }
 @media (min-width: 768px) {
   .container {
     grid-template-columns: 1fr 2fr 1fr;
     grid-template-rows: 100px minmax(150px, auto) 100px;
     grid-template-areas: 
       "header header header"
       "nav main aside"
       "footer footer footer";
   }
 }
 @media (min-width: 992px) {
   .container {
     grid-template-areas: 
       "header header header"
       "nav main aside"
       "nav footer footer";
   }
 }