teamtreehouse-css-grid-layout/css/grid.css

/* grid container */
.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';
}

@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';
  }
}

header {
  grid-area: header;
}

nav {
  grid-area: nav;
}

main {
  grid-area: main;
}

aside {
  grid-area: aside;
}

footer {
  grid-area: footer;
}