<div class="t1">
  <div class="t2">
    <div class="t3">
      <span>t3-grid</span>
      <div class="t4 t4-grid">
        <div class="t5">t5-1</div>
        <div class="t5">t5-2</div>
        <div class="t5">t5-3</div>
        <div class="t5">t5-4</div>
        <div class="t5">t5-5</div>
        <div class="t5">t5-6</div>
        <div class="t5">t5-7</div>
        <div class="t5">t5-8</div>
        <div class="t5">t5-9</div>
        <div class="t5">t5-10</div>
      </div>
    </div>
  </div>
  <div class="t2">
    <div class="t3">
      <span>t3-flex</span>
      <div class="t4 t4-flex">
        <div class="t5">t5-1</div>
        <div class="t5">t5-2</div>
        <div class="t5">t5-3</div>
        <div class="t5">t5-4</div>
        <div class="t5">t5-5</div>
        <div class="t5">t5-6</div>
        <div class="t5">t5-7</div>
        <div class="t5">t5-8</div>
        <div class="t5">t5-9</div>
        <div class="t5">t5-10</div>
      </div>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}
:root {
  font-family: system-ui;
}
.t1 {
  position: sticky;
  top: 0;
  background: #F88;
  padding: 10px;
  display: grid;
  grid: auto-flow / 1fr 1fr;
  gap: 10px;
}
.t2 {
  position: relative;
  background: #8F8;
  padding: 10px;
  display: flex;
  flex-flow: wrap;
  gap: 10px;
  justify-content: end;
}
.t3 {
  background: #88F;
}
.t4 {
  --size: 100px;
  position: absolute;
  right: 0;
  max-width: 100%;
  background: #FF8;
  padding: 10px;
}
.t4-grid {
  display: grid;
  grid: auto-flow / repeat(auto-fit, var(--size));
  gap: 10px;
}
.t4-flex {
  display: flex;
  flex-flow: wrap;
  gap: 10px;
}
.t4-flex > * {
  width: var(--size);
}
.t5 {
  aspect-ratio: 1;
  background: #8FF;
  padding: 10px;
  display: grid;
  place-items: center;
}