Générateur Flexbox et Grid

Comment utiliser Générateur Flexbox et Grid

1. Choisissez Flexbox ou Grid selon votre cas.
2. Réglez la direction, la répartition et les espacements.
3. Copiez le CSS obtenu.

Lequel choisir : la règle pratique

Réponse courte : Flexbox pour une dimension, Grid pour deux.

Flexbox répartit des éléments le long d'un axe. C'est le choix naturel pour une barre de navigation, une rangée de boutons, une carte avec icône et texte, ou tout ce qui s'aligne sur une seule ligne.

Grid définit lignes et colonnes simultanément. C'est le choix naturel pour la structure d'une page, une galerie, un tableau de bord ou un formulaire à libellés alignés.

Autre façon de trancher : si la taille des éléments doit commander la disposition, prenez Flexbox. Si la disposition doit commander les éléments, prenez Grid.

Ils ne s'opposent pas. Dans un projet réel, on utilise Grid pour la structure et Flexbox à l'intérieur de chaque cellule.

Et une recommandation qui économise beaucoup de code : utilisez la propriété gap dans les deux plutôt que des marges entre éléments. Elle évite le classique problème du dernier élément avec une marge en trop et fonctionne pareil dans les deux systèmes.

Grid sans requêtes de média

La capacité la plus utile de Grid est aussi la moins connue.

La combinaison repeat(auto-fit, minmax(250px, 1fr)) crée une grille qui ajuste seule son nombre de colonnes à la largeur disponible, sans écrire la moindre requête de média.

Chaque colonne fera au moins 250 pixels et s'étirera pour occuper l'espace restant. Quand elles ne tiennent plus, la grille passe d'elle-même à une colonne de moins.

La différence entre auto-fit et auto-fill porte sur les colonnes excédentaires : auto-fit les réduit et étire les autres, auto-fill les conserve vides. Pour une galerie, on veut presque toujours auto-fit.

Avec grid-template-areas, vous pouvez en outre nommer des zones et dessiner la structure de façon lisible, puis redéfinir ces seules zones pour changer la disposition sur mobile.

Pensez aussi aux requêtes de conteneur : elles permettent à un composant de réagir à la largeur de son conteneur plutôt qu'à celle de la fenêtre, ce qu'on voulait presque toujours en réalité.

Les erreurs classiques

Des choses qui font perdre du temps à tout le monde.

Un élément flexible ne rétrécit pas en dessous de la taille de son contenu par défaut, ce qui fait déborder les grilles contenant de longs textes ou des blocs de code. La solution est min-width: 0 sur l'élément flexible, ou overflow: hidden.

Les pourcentages dans flex-basis se calculent sur l'axe principal, pas toujours sur ce qu'on imagine. Il est plus prévisible d'écrire flex: 1 1 0 et de laisser la répartition se faire.

L'alignement comporte deux axes : justify-content sur l'axe principal et align-items sur l'axe transversal. En Flexbox avec une direction en colonne, ces axes s'échangent, et tout le monde s'y trompe une fois.

L'ordre visuel obtenu par order ou grid-area ne change pas l'ordre du DOM. Une personne naviguant au clavier ou avec un lecteur d'écran suivra l'ordre du code : réorganiser visuellement peut rendre une page inutilisable. Modifiez le HTML plutôt que le CSS quand l'ordre a du sens.

Enfin, les hauteurs égales dans une rangée de cartes ne demandent plus aucune astuce : c'est le comportement par défaut des deux systèmes.

Questions fréquentes