[解決済み] グリッドアイテムの非表示

.hg_header {
  grid-area: header;
}

.hg_footer {
  grid-area: footer;
}

.hg_main {
  grid-area: main;
}

.hg_left {
  grid-area: altnav;
}

header {
  background-color: yellow;
}

main {
  background-color: white;
}

aside {
  background-color: gray;
}

footer {
  background-color: black;
}

.hg {
  display: grid;
  grid-template-areas: "header header header" "altnav main main" "footer footer footer";
  grid-template-columns: 150px 1fr 150px;
  grid-template-rows: 100 1fr 50px;
  min-height: 100vh;
}

@media screen and (max-width: 600px) {
  .hg {
    grid-template-areas: "header" "main" "footer";
    grid-template-columns: 100%;
    grid-template-rows: 100px 1fr 50px;
  }
  .hg_left {
    display: none;
  }
}

<header class='hg_header'>HEADER</header>
<main class='hg_main'>MAIN</main>
<aside class='hg_left'>ASIDE</aside>
<footer class='hg_footer'>FOOTER</footer>

body {
   display: grid;
   grid-template-areas: "header header header" 
                          "altnav main main" 
                        "footer footer footer";
   grid-template-columns: 150px 1fr 150px;
   grid-template-rows: 100 1fr 50px;
   height: 100vh; 
 }
 
header { grid-area: header; background-color: yellow; }
main   { grid-area: main;   background-color: white;  }
aside  { grid-area: altnav; background-color: gray;   }
footer { grid-area: footer; background-color: black;  }
 
@media screen and (max-width: 600px) {
   body {
     grid-template-areas: "header" "main" "footer";
     grid-template-columns: 100%;
     grid-template-rows: 100px 1fr 50px;
   }
   
   aside { display: none; }
 }

body   { margin: 0; }

<header>HEADER</header>
<main>MAIN</main>
<aside>ASIDE</aside>
<footer>FOOTER</footer>