Fungsi lan fitur CSS modern apa sing nyederhanakake layout (clamp, aspect-ratio, subgrid)?

Question

Accepted Answer

CSS modern wis nambah fungsi lan properti sing ngganti kategori lengkap saka media-query lan JavaScript hack. Sing paling penting:

## clamp() — nilai fluida lan terbatas

```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)` menehi **tipografi/spasi fluida** sing skalane lancar karo viewport nanging tetep ing batas — ngganti sawetara breakpoint saka `font-size` media query nganggo siji baris.

## aspect-ratio — jaga proporsi

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

Sadhèn iki, njaga kotak responsive 16:9 butuh hack terkenal `padding-bottom: 56.25%`. Saiki cuma siji deklarasi — lan ngganti ruang (apik kanggo CLS) sadurunge gambar dimuat.

## 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()` milih nilai cilik/gedhe, nglakokake siji properti responsif tanpa media query (conto "90% lebar, nanging ora luwih saka 1200px").

## subgrid — selarasake grid sing nesting

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

`subgrid` nglakokake grid sing nesting **ngrusakake baris track orangtua**, supaya item ing kartu terpisah (judul, isi, tobol) selaras sempurna ing baris sing dibagi — biasane ora mungkin tanpa tinggi tetep.

## gap ing mana-mana & helper logis

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

## Apa iku penting

Fitur iki ngilangake hack jangka panjang: `clamp()`/`min()`/`max()` ngganti tumpukan media query kanggo ukuran fluida, `aspect-ratio` ngganti hack padding lan nglindungi owah layout, lan `subgrid` ngatasi selarasan cross-component.

Nggawe layout responsif lan proporsional luwih gampang lan kuat — CSS modern nglakokake secara deklaratif apa sing dulu butuh JS utawa trik rapuh.