<div class="container">
  <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:800px;
  --n:5;
  /* second breakpoint*/
  --w2:400px;
  --m:2;

  display:grid;
  grid-template-columns:
    repeat(auto-fill,
      minmax(clamp(clamp(
          100%/(var(--n) + 1) + 0.1%, 
        (var(--w1) - 100vw)*1000,
           100%/(var(--m) + 1) + 0.1%), 
        (var(--w2) - 100vw)*1000,
             100%), 1fr));
  gap:10px;
}
.container > div {
  height:100px;
  background:red;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.