Onderstaand verhaal is absoluut briljant, maar het kan een stuk simpeler...
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Je hebt dan geen controle over het aantal columns, maar in negen van de tien gevallen werkt dit prima! (Zie ook nog even het verhaal van Sara Soueidan over het verschil tussen auto-fit en auto-fill).
Dit moet ik onthouden!
Hoe je iets responsive maakt zonder media queries. Echt heel knap gevonden.
Maakt gebruik van de clamp() functie, zelfs van dubbel-geneste clamp() functies, hoe kom je erop 
.
Het wordt uitgebreid uitgelegd in dit artikel op DEV: Build your responsive website without media queries.
Met nog wat uitbreiding kun je het zelfs als container-query gebruiken, en de kleur (en who knows what else) aanpassen op basis van de schermbreedte.
En nu 's kijken of ik het aan de praat krijg.
Zo'n nested clamp ziet er zo uit:
grid-template-columns:
repeat(auto-fill,
minmax(clamp(clamp(clamp(
100%/(var(--n) + 1) + 0.1%,
(var(--w1) - 100vw)*1000,
100%/(var(--m) + 1) + 0.1%),
(var(--w2) - 100vw)*1000,
100%/(var(--p) + 1) + 0.1%),
(var(--w3) - 100vw)*1000,
100%), 1fr));
gap:10px;
Wat de variables betreft: w* geeft de "breakpoints" aan, n,m en p het aantal elements per regel:
/* first breakpoint*/
--w1:1200px;
--n:6;
/* second breakpoint*/
--w2:800px;
--m:4;
/* third breakpoint*/
--w3:400px;
--p:2;
En voor de tweede container:
/* first breakpoint*/
--w1:900px;
--n:8;
/* second breakpoint*/
--w2:500px;
--m:4;
/* third breakpoint*/
--w3:300px;
--p:2;
Mijn hersens gaan ervan kraken, maar ik begin het te snappen...