Mise en page avec Flexbox et Grid

Une barre de navigation : le logo à gauche, les liens au centre, un bouton à droite. Vous écrivez flex, vous ajoutez justify-between, et le résultat est presque bon — sauf que les liens ne sont pas centrés dans la page, ils flottent au milieu de l'espace restant, et le tout se décale dès qu'un nom d'utilisateur est plus long. Vous ajoutez flex-1, puis un mx-auto, puis un w-1/3 qui règle le symptôme et casse l'affichage sur mobile. Une heure plus tard, vous avez six classes de rattrapage et une mise en page fragile.

Le problème n'est presque jamais Tailwind. C'est que Flexbox et Grid ne servent pas au même usage, et que la moitié des difficultés d'alignement viennent d'avoir choisi le mauvais des deux. Flexbox distribue des éléments sur un seul axe, en laissant leurs tailles s'ajuster au contenu : c'est l'outil des barres, des groupes de boutons, des lignes de métadonnées. Grid pose une structure en deux dimensions décidée à l'avance, indépendante du contenu : c'est l'outil des grilles de cartes, des gabarits de page, des formulaires alignés. Une barre de navigation à trois zones fixes est un problème de Grid, pas de Flexbox — d'où l'heure perdue.