Koje moderne CSS funkcije i svojstva pojednostavljuju raspored (clamp, aspect-ratio, subgrid)?

Question

Accepted Answer

Moderni CSS je dodao funkcije i svojstva koja zamjenjuju cijele kategorije media-query i JavaScript trikova. Ističućih:

## clamp() — fluidne, ograničene vrijednosti

```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)` pruža **fluidnu tipografiju/razmak** koji se glatko skalira s prikazom, ali ostaje unutar granica — zamjenjujući nekoliko breakpoints-ovih `font-size` media query-ja s jednom linijom.

## aspect-ratio — zadržavanje omjera

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

Prije toga, održavanje responzivnog okvira 16:9 zahtijevalo je poznati `padding-bottom: 56.25%` trik. Sada je to samo jedna deklaracija — i ona rezervira prostor (dobro za CLS) prije nego što se slike učitaju.

## 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()` biraju manju/veću vrijednost, omogućujući jednom svojstvu da bude responzivno bez media query-ja (npr. "90% širine, ali nikada više od 1200px").

## subgrid — poravnanje ugneždenih mreža

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

`subgrid` omogućava ugneždenu mrežu da **naslijedi redove prati svojega roditelja**, tako da se stavke preko odvojenih kartica (naslovi, tijelo, dugmići) savršeno poravnavaju na zajedničkim redovima — prije toga nemoguće bez fiksnih visina.

## jaz svugdje i logički pomoćnici

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

## Zašto je to važno

Ova svojstva eliminiraju dugotrajna rješenja: `clamp()`/`min()`/`max()` zamjenjuju nizove media query-ja za fluidnu veličinu, `aspect-ratio` zamjenjuje padding trik i štiti od promjene rasporeda, a `subgrid` rješava poravnanje između komponenti.

Čine responzivne, proporcionalne rasporede dramatično jednostavnijima i robusnijima — moderni CSS deklarativno radi ono što je prije trebalo JS ili nesigurne trikove.