<div class="container">
<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.