Responsive Prefixes

Définition

Préfixes (sm, md, lg, xl, 2xl) qui appliquent une classe uniquement a partir d'un breakpoint donne. L'approche est mobile-first par défaut.

Analogie

Des vêtements adaptatifs : un manteau que tu enfiles seulement quand il fait froid (a partir d'une certaine température).

Exemple de code

<div class="grid grid-cols-1 sm:grid-cols-2
  md:grid-cols-3 lg:grid-cols-4">
  <!-- Responsive grid -->
</div>

Cas d'usage

Créer des layouts responsifs sans média queries manuelles, directement dans le markup.

Anti-pattern

Termes liés