css grid layout

Вот такой небольшой пример покрывает 90% случаев моего использования css grid.

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background: #f0f0f0;
  font-size: 16px;
  padding: 0;
  margin: 0;
}

.layout {
  min-height: 100vh;
  max-width: 1200px;
  padding: 15px 0;
  margin: 0 auto;
  grid-gap: 15px;
  display: grid;
  gap: 15px;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "footer";
}

header,
footer,
main,
aside {
  background: #fff;
  display: block;
  padding: 15px;
}

header {
  grid-area: header;
}

footer {
  grid-area: footer;
}

main {
  grid-area: main;
}

aside {
  grid-area: nav;
}

@media (min-width: 40em) {
  .layout {
    grid-template-columns: 12em auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header"
      "nav main"
      "nav footer";
  }
}

<div class="layout">
  <header>header</header>
  <main>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore debitis
    quasi itaque sed, doloremque magni provident animi soluta enim, optio quia
    officia quos consectetur. Ipsam asperiores beatae sit quisquam
    exercitationem? Veniam possimus exercitationem voluptas molestias?
    Distinctio, impedit quia! Itaque cupiditate cumque laudantium sed odit nobis
    possimus quo quae iusto eveniet, blanditiis excepturi inventore accusantium
    asperiores provident soluta sunt corporis minus. Sit animi incidunt ut quia
    exercitationem, ipsa in nisi, sunt beatae voluptatum cum. Velit perspiciatis
    quidem similique, maiores saepe earum, laudantium sapiente labore asperiores
    natus impedit nemo ipsa non quibusdam.
  </main>
  <aside>
    nav<br />
    nav<br />
    nav<br />
    nav<br />
    nav
  </aside>
  <footer>footer</footer>
</div>

Результат