Create grid layout with flex and grid systems

HTML

<main>
  <div class="container">
    <section class="nav">Nav</section>
    <section class="content">Content</section>
    <footer class="footer">Footer</footer>
  </div>
</main>

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }

main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
}

.container {
  display: grid;
  grid-template-columns: 250px 950px;
  grid-template-rows: 750px 150px;
  grid-template-areas: "nav content" "footer footer";
  width: 100%;
  max-width: 1200px;
}

.nav {
  border: 3px solid crimson;
  grid-area: nav;
  padding: 10px;
}

.content {
  border: 3px solid green;
  grid-area: content;
  padding: 10px;
}

.footer {
  border: 3px solid blue;
  grid-area: footer;
  padding: 10px;
}