Quelles sont les fonctions et propriétés CSS modernes qui simplifient la mise en page (clamp, aspect-ratio, subgrid) ?

Question

Accepted Answer

Le CSS moderne a ajouté des fonctions et des propriétés qui remplacent des catégories entières de media queries et de hacks JavaScript. Les incontournables :

## clamp() — valeurs fluides et délimitées

```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)` offre une **typographie/espacement fluide** qui s'adapte régulièrement à la fenêtre d'affichage tout en restant dans les limites — remplaçant plusieurs points d'arrêt de media queries `font-size` par une seule ligne.

## aspect-ratio — conserver les proportions

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

Avant cela, maintenir une boîte 16:9 réactive nécessitait le fameux hack `padding-bottom: 56.25%`. Maintenant, c'est une seule déclaration — et elle réserve l'espace (bon pour le CLS) avant le chargement des images.

## 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()` choisissent la plus petite/plus grande valeur, permettant à une propriété d'être réactive sans media query (p. ex. « 90% de largeur, mais pas plus de 1200px »).

## subgrid — aligner les grilles imbriquées

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

`subgrid` permet à une grille imbriquée d'**hériter des lignes de piste de son parent**, de sorte que les éléments entre des cartes séparées (titres, corps, boutons) s'alignent parfaitement sur des lignes partagées — auparavant impossible sans hauteurs fixes.

## gap partout et assistants logiques

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

## Pourquoi c'est important

Ces fonctionnalités éliminent des hacks de longue date : `clamp()`/`min()`/`max()` remplacent des piles de media queries pour le dimensionnement fluide, `aspect-ratio` remplace le hack de padding et protège le décalage de mise en page, et `subgrid` résout l'alignement entre composants.

Elles rendent les mises en page réactives et proportionnelles considérablement plus simples et robustes — le CSS moderne fait de manière déclarative ce qui avait besoin de JS ou de tricks fragiles.