<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container extra">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.container {
  /* first breakpoint*/
  --w1:1200px;
  --n:6;
  /* second breakpoint*/
  --w2:800px;
  --m:4;
  /* third breakpoint*/
  --w3:400px;
  --p:2;

  display:grid;
  grid-template-columns:
    repeat(auto-fill,
      minmax(clamp(clamp(clamp(  
            100%/(var(--n) + 1) + 0.1%,
              (var(--w1) - 100%)*1000,
            100%/(var(--m) + 1) + 0.1%), 
              (var(--w2) - 100%)*1000,
            100%/(var(--p) + 1) + 0.1%), 
              (var(--w3) - 100%)*1000,
            100%), 1fr));
  gap:10px;
  border:1px solid;
  overflow:hidden;
  margin:5px;
  resize:horizontal;
}
.container > div {
  height:100px;
  background:red;
}

.extra {
  /* first breakpoint*/
  --w1:900px;
  --n:8;
  /* second breakpoint*/
  --w2:500px;
  --m:4;
  /* third  breakpoint*/
  --w3:300px;
  --p:2;
  padding:50px;
}
.extra > div {
  background:green;
}