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