<div class="container">
  <header>
    <h1>This is the page title</h1>
  </header>
  <nav>
    <ul>
      <li>item01</li>
      <li>item02</li>
      <li>item03</li>
      <li>item04</li>
      <li>item05</li>
    </ul>
  </nav>
  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam illum ipsa corrupti eos praesentium repudiandae aperiam, saepe rem quis ratione cum tempora eligendi dolor, beatae nesciunt aut facilis ex provident!</p>
    <p>Pariatur, quis? Esse suscipit tenetur eligendi iusto iure in, exercitationem id quia rerum error odio amet? Debitis, reprehenderit, laudantium consequatur voluptatibus sunt dolorem doloremque obcaecati praesentium cum pariatur fugit repellendus!</p>
    <p>Unde voluptates aspernatur ex vel doloremque deleniti autem dolore optio nihil magnam suscipit tempora ad consectetur vitae sequi ducimus, obcaecati culpa officia voluptate. Praesentium odio beatae sapiente laborum officiis quae.</p>
  </main>

  <footer>
    <p>footer content goes here</p>
  </footer>
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
}

  .container {
    display: grid;
    gap: 1rem 2rem;
    grid-template-areas:
      "h h h h h h"
      "h h h h h h"
      "n m m m m m"
      "n m m m m m"
      "n m m m m m"
      "n m m m m m"
      "n m m m m m"
      "f f f f f f";
  }

.container > header {
  grid-area: h;
  border: 2px solid red;
}

.container > nav {
  grid-area: n;
  border: 2px solid green;
}

.container > main {
  grid-area: m;
  border: 2px solid blue;

  p {
    inline-size: 80ch;
  }
}

.container > footer {
  grid-area: f;
  border: 2px solid hotpink;
}