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 smile.

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...