Grille CSS et Flexbox

Les deux modules de mise en page modernes répondent à des besoins distincts, et les employer ensemble est la pratique courante.

Flexbox

Il organise les éléments sur un seul axe, horizontal ou vertical, et répartit l'espace disponible entre eux. C'est l'outil des barres de navigation, des groupes de boutons et des alignements verticaux, longtemps si difficiles à obtenir.

La grille

Elle travaille sur deux dimensions simultanément, lignes et colonnes, et permet de définir la structure d'une page indépendamment de l'ordre du code. Les unités fractionnaires et la fonction de répétition automatique produisent des grilles qui s'adaptent sans requête de média.

Sans requêtes de média

Une grille à colonnes automatiques avec une largeur minimale, ou un conteneur flexible autorisant le retour à la ligne, produit une mise en page adaptative sans aucun point de rupture déclaré. C'est souvent plus robuste qu'une série de seuils fixes.

Les requêtes de conteneur

Plus récentes, elles permettent à un composant de s'adapter à la largeur de son conteneur plutôt qu'à celle de la fenêtre. Elles répondent au besoin le plus criant des interfaces à composants réutilisables.