Как современные функции и свойства CSS упрощают макет (clamp, aspect-ratio, subgrid)?

Question

Accepted Answer

Современный CSS добавил функции и свойства, которые заменяют целые категории хаков media-query и JavaScript. Самые заметные:

## clamp() — плавные, ограниченные значения

```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)` обеспечивает **плавную типографику/отступы**, которые плавно масштабируются с viewport, но остаются в пределах — заменяет несколько media-запросов `font-size` одной строкой.

## aspect-ratio — сохранение пропорций

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

Ранее для сохранения адаптивного блока 16:9 требовался печально известный хак `padding-bottom: 56.25%`. Теперь это одно объявление — и оно резервирует место (хорошо для CLS) до загрузки изображений.

## 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()` выбирают меньшее/большее значение, позволяя одному свойству быть адаптивным без media-запроса (например, "90% ширины, но не более 1200px").

## subgrid — выравнивание вложенных сеток

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

`subgrid` позволяет вложенной сетке **наследовать линии дорожек своего родителя**, чтобы элементы на отдельных карточках (заголовки, содержимое, кнопки) идеально выравнивались на общих строках — раньше это было невозможно без фиксированной высоты.

## gap везде и логические помощники

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

## Почему это важно

Эти функции исключают давние хаки: `clamp()`/`min()`/`max()` заменяют стеки media-запросов для плавного масштабирования, `aspect-ratio` заменяет хак padding и защищает от сдвигов макета, а `subgrid` решает проблему выравнивания между компонентами.

Они делают адаптивные, пропорциональные макеты намного проще и надежнее — современный CSS делает декларативно то, что раньше требовало JS или хрупких трюков.