<div class="site">
  <header></header>
  <nav>
    <ul role="list" class="container-nav">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>

  <main>

    <section>
      <div class="item"></div>
    </section>
    <section>
      <div class="item"></div>
      <div class="item"></div>
    </section>

    <aside>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </aside>

  </main>

  <footer></footer>
</div>
* {
  --breakpoint: var(--break-at, 30rem);
  --min: min((var(--breakpoint) - 100%) * 999, 100%);
  --clamp: clamp(100% / var(--cols, 1) - 15px, (var(--breakpoint) - 100%) * 999, 100%);
}

.site {
  width: min(100%, 1000px - 40px);
  margin: 0 auto;
  padding: 20px;
  display: grid;
  gap: 15px;
}

ul {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        var(--min),
        1fr
      )
    );
  gap: 5px;
  grid-auto-flow: dense;
}

nav li {
  background-color: black;
  padding: 10px;
}

header,
footer {
  padding: 25px 0;
}

header,
footer {
  background-color: orange;
}

main {
  --break-at: 40rem;
  display: grid;
  grid:
    dense auto-flow auto /
    repeat(
      auto-fit, minmax(
        var(--min),
        1fr
      )
    );
  gap: 15px;
}


section {
  --cols: 2;
  --break-at: 30rem;
  display: grid;
  grid:
    dense auto-flow auto /
    repeat(
      auto-fit, minmax(
        var(--clamp),
        1fr
      )
    );
  gap: 15px;
}

section .item {
  background: orange;
  /*min-height: 100px;*/
  padding-top: 40%;
}

aside {
  --cols: 3;
  --break-at: 20em;
  grid-column-end: -1;
  display: grid;
  grid:
    auto-flow 50px /
    repeat(
      auto-fill, minmax(
        var(--clamp),
        1fr
      )
    );
  gap: 5px;
}

aside .item {
  background: #000;
}




html {
  height: 100%;
}

body {
  min-height: 100%;
  font-family: 'Inter', sans-serif;
}

External CSS

  1. https://codepen.io/dannievinther/pen/af7e27ae86cdc49fbf85e54ae30c50eb.css

External JavaScript

This Pen doesn't use any external JavaScript resources.