Hoe vereenvoudigen moderne CSS-functies en -eigenschappen layout (clamp, aspect-ratio, subgrid)?

Question

Accepted Answer

Modern CSS heeft functies en properties toegevoegd die hele categorieën media-query en JavaScript-hacks vervangen. De meest opvallende:

## Waarom het belangrijk is

```css
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
/*               │       │     └── maximum (never bigger than 3rem) */
/*               │       └──────── preferred (scales with viewport) */
/*               └──────────────── minimum (never smaller than 1.5rem) */
```

`clamp(min, preferred, max)` biedt **vloeiende typografie/spatiëring** die soepel met de viewport schaalt maar binnen grenzen blijft — vervang meerdere `font-size` media query's in één regel.

## aspect-ratio — verhoudingen behouden

```css
.video { aspect-ratio: 16 / 9; width: 100%; } /* height auto-computed to keep 16:9 */
.avatar { aspect-ratio: 1; }                    /* perfect square at any width */
```

Voordien was de beruchte `padding-bottom: 56.25%` hack nodig om een responsieve 16:9-box te behouden. Nu is het één declaratie — en het reserveert ruimte (goed voor CLS) voordat afbeeldingen laden.

## min() / max()

```css
.container { width: min(90%, 1200px); } /* whichever is SMALLER → fluid but capped */
.box { padding: max(1rem, 3vw); }       /* whichever is LARGER → a minimum floor */
```

`min()`/`max()` kiezen de kleinere/grotere waarde, waardoor één property responsief kan zijn zonder media query (bijv. "90% breed, maar nooit meer dan 1200px").

## subgrid — geneste rasters uitlijnen

```css
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
```

`subgrid` laat een genest raster **de tracklijnen van zijn parent overnemen**, zodat items in aparte kaarten (titels, bodies, knoppen) perfect op gedeelde rijen uitlijnen — voorheen onmogelijk zonder vaste hoogte.

## gap overal & logische helpers

```css
.flex { display: flex; gap: 1rem; }   /* gap now works in flexbox, not just grid */
```

## Waarom het belangrijk is

Deze functies elimineren oude hacks: `clamp()`/`min()`/`max()` vervangen stacks van media query's voor vloeiende grootte, `aspect-ratio` vervangt de padding-hack en beschermt tegen layout shift, en `subgrid` lost component-overschrijdende uitlijning op.

Ze maken responsieve, evenredige layouts dramatisch eenvoudiger en robuuster — modern CSS doet declaratief wat vroeger JS of fragiele trucjes nodig had.