Jaké moderní funkce a vlastnosti CSS zjednodušují rozložení (clamp, aspect-ratio, subgrid)?

Question

Accepted Answer

Moderní CSS přidalo funkce a vlastnosti, které nahrazují celé kategorie hacků media-query a JavaScriptu. Ty nejzásadnější:

## clamp() — tekuté, omezené hodnoty

```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)` poskytuje **tekutou typografii/rozestupy**, která se hladce škáluje s viewport, ale zůstává v rámci hranic — nahrazuje Several breakpointů `font-size` media queries jedním řádkem.

## aspect-ratio — zachování proporcí

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

Dříve si zachování responsive 16:9 pole vyžadovalo notoricky známý `padding-bottom: 56.25%` hack. Nyní je to jeden deklarace — a rezervuje místo (dobré pro CLS) před načtením obrázků.

## 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()` vybírají menší/větší z hodnot, což umožňuje jedné vlastnosti být responsive bez media query (např. "90% široké, ale nikdy více než 1200px").

## subgrid — zarovnání vnořených mřížek

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

`subgrid` umožňuje vnořené mřížce **zdědit linie stop své nadřazené**, takže položky v jednotlivých kartách (tituly, těla, tlačítka) se dokonale zarovnají na sdílených řádcích — dříve nemožné bez pevných výšek.

## gap všude & logické pomocníky

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

## Proč je to důležité

Tyto funkce eliminují dlouhodobě zavedené hacky: `clamp()`/`min()`/`max()` nahrazují zásobníky media queries pro tekuté změny velikosti, `aspect-ratio` nahrazuje hack padding a chrání před posunem rozložení, a `subgrid` řeší zarovnání mezi komponentami.

Dělají responsive, proporcionální rozložení dramaticky jednodušší a robustnější — moderní CSS dělá deklarativně to, co dříve vyžadovalo JS nebo nestabilní triky.