<div class="resizable-container">
  <div class="container">
    <header>
      <p>Header</p>
    </header>
    <main>
      <p>Main</p>
    </main>
    <nav>
      <p>Nav</p>
    </nav>
    <aside>
      <p>Aside</p>
    </aside>
    <footer>
      <p>Footer</p>
    </footer>
  </div>
</div>

*,
::before,
::after {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.resizable-container {
  container-type: inline-size;
  margin: auto;
  overflow: hidden;
  resize: horizontal;
}
.container {
  & {
    --row-1: "header header header" auto;
    --row-2: "main main main" minmax(auto, 1fr);
    --row-3: /* NULL */ ;
    --row-4: /* NULL */ ;
    --row-5: "footer footer footer" auto;
    --column-1: 1fr;
    --column-2: 1fr;
    --column-3: 1fr;
    background: #eee;
    display: grid;
    gap: 16px;
    grid:
      var(--row-1)
      var(--row-2)
      var(--row-3)
      var(--row-4)
      var(--row-5)
      /
      var(--column-1)
      var(--column-2)
      var(--column-3);
    min-block-size: 100dvb;
    padding: 16px;
  }
  &:where(:has(> nav)) {
    --row-3: "nav nav nav" auto;
  }
  &:where(:has(> aside)) {
    --row-4: "aside aside aside" auto;
  }
  & > header {
    background: #bbb;
    grid-area: header;
    text-align: center;
  }
  & > main {
    background: #e98;
    background: #fa9;
    grid-area: main;
    text-align: center;
  }
  & > nav {
    background: #7c6;
    grid-area: nav;
    text-align: center;
  }
  & > aside {
    background: #9bf;
    grid-area: aside;
    text-align: center;
  }
  & > footer {
    background: #bbb;
    grid-area: footer;
    text-align: center;
  }
  @container (inline-size > 480px) {
    &:where(:has(> nav)) {
      --row-2: "main main nav" minmax(auto, 1fr);
      --row-3: /* NULL */ ;
      --row-4: /* NULL */ ;
    }
    &:where(:has(> aside)) {
      --row-2: "main main aside" minmax(auto, 1fr);
      --row-3: /* NULL */ ;
      --row-4: /* NULL */ ;
    }
    &:where(:has(> nav):has(> aside)) {
      --row-2: "main main nav" auto;
      --row-3: "main main aside" minmax(auto, 1fr);
      --row-4: /* NULL */ ;
    }
  }
  @container (inline-size > 640px) {
    &:where(:has(> nav):has(> aside)) {
      --row-1: /* NULL */ ;
      --row-2: "header main nav" auto;
      --row-3: "header main aside" minmax(auto, 1fr);
      --row-4: /* NULL */ ;
      --row-5: "header footer footer" auto;
      --column-2: 2fr;
    }
  }
}