grid.css

#content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
  max-width: 960px;
  margin: 0 auto;
  grid-template-areas:
    "header header header header"
    "footer footer footer footer"
    "main main main main"
    "main main main main"
    "aside aside nav nav"
    "section section section section"
    "section section section section";
}

@media only screen and (min-width: 760px) {
  #content {
    grid-template-areas:
      "header header header header"
      "aside aside main main"
      "nav nav main main"
      "section section section section"
      "section section section section"
      "footer footer footer footer";
  }
}

header {
  grid-area: header;
}

main {
  grid-area: main;
}

aside {
  grid-area: aside;
}

nav {
  grid-area: nav;
}

section {
  grid-area: section;
}

footer {
  grid-area: footer;
}