CSS moderne : Flexbox, Grid et container queries

Il fut un temps où centrer une div relevait de la magie noire. Ce temps est révolu : le CSS moderne offre des outils de mise en page puissants et intuitifs. Flexbox, Grid et les container queries ont transformé la façon dont on construit des interfaces. Tour d’horizon de ce trio incontournable.

Flexbox : l’axe unique

Flexbox excelle pour disposer des éléments sur une dimension — une ligne ou une colonne. Barre de navigation, groupe de boutons, alignement vertical : dès qu’il s’agit de répartir de l’espace sur un axe, Flexbox est l’outil. Ses propriétés clés — justify-content, align-items, gap — rendent triviaux des alignements autrefois pénibles.

Grid : les deux dimensions

CSS Grid pense en deux dimensions : lignes ET colonnes simultanément. C’est l’outil des mises en page globales — la structure d’une page, une galerie, un tableau de bord. Avec grid-template-columns, fr, minmax() et auto-fit, on crée des grilles réellement responsives, sans une seule media query dans les cas simples.

La bonne question : un ou deux axes ?

On n’oppose pas Flexbox et Grid, on les combine. La règle mentale : Grid pour la macro-mise en page (la charpente), Flexbox pour la micro (le contenu d’une cellule). Une carte placée par Grid, dont le contenu interne est aligné par Flexbox : voilà le duo gagnant.

Container queries : la vraie révolution

Longtemps, le responsive dépendait de la taille de la fenêtre (media queries). Problème : un même composant peut vivre dans une colonne étroite ou une zone large. Les container queries changent la donne : un composant s’adapte désormais à la taille de son conteneur, pas de l’écran. Une carte devient horizontale si son conteneur est large, verticale s’il est étroit — où qu’elle soit placée. C’est le vrai composant réutilisable.

• container-type: inline-size sur le parent définit le conteneur de référence.
• @container (min-width: 400px) { ... } applique des styles selon sa largeur.

À retenir

Flexbox pour un axe, Grid pour deux, et les deux ensemble pour tout le reste. Les container queries libèrent enfin les composants de la tyrannie de la taille d’écran. Maîtriser ce trio, c’est écrire des mises en page modernes, robustes et vraiment réutilisables — sans hacks.