Intrinsic Design

Définition

Philosophie de layout où les composants s'adaptent à leur contenu et leur contexte grâce à Grid, Flexbox et fonctions intrinsèques (min(), max(), clamp()) plutôt que des breakpoints fixes.

Analogie

Comme de l'eau qui prend naturellement la forme de son récipient, sans qu'on ait besoin de la mouler.

Exemple de code

.grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

Cas d'usage

Créer des layouts qui fonctionnent partout sans écrire de média queries, en exploitant la flexibilité native de CSS.

Termes liés