Fluid Spacing

Definition

Application de clamp() aux marges, paddings et gaps pour un espacement qui varie fluidement avec le viewport. Crée un rythme visuel cohérent sur toutes les tailles d'écran.

Analogie

Comme un accordéon : l'espace entre les plis s'adapte naturellement quand on l'étire ou le compresse.

Exemple de code

:root {
  --space-s: clamp(0.75rem, 0.5rem + 1vw, 1rem);
  --space-m: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --space-l: clamp(2rem, 1.5rem + 3vw, 4rem);
}
section { padding: var(--space-l); gap: var(--space-m); }

Cas d'usage

Appliquer un système d'espacement proportionnel qui élimine la majorité des breakpoints de layout.

Termes lies