grid-template、グリットテンプレート

//画像１
body {
  font-size: 2rem;
  width: 800px;
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template: 
    "... ...... ...... ...... ...... ...... ... " 10px
    "... header header header header header ..." 150px
    "... ...... ...... ...... ...... ...... ..." 10px
    "... left   ...... center ...... right  ..." 1fr
    "...  ...... ...... ...... ...... ...... ... " 10px
    "... footer footer footer footer footer ..." 300px
    "...  ...... ...... ...... ...... ...... ... " 10px

    /10px 150px 10px 1fr 10px 200px 10px;
}

//画像２
header {
  grid-area: header;
}
main {
  grid-area: center;
}
nav {
  grid-area: left;
}
aside {
  grid-area: right;
}
footer {
  grid-area: footer;
}

@media screen and (max-width: 1000px) {
  body {
    grid-template:
    "header"150px
    "center"1fr
    "left  "
    "right "
    "footer"300px;
  }