Générateur de Flexbox/Grid CSS

À propos de cet outil

Ce générateur permet de construire et de comprendre une mise en page CSS avec Flexbox ou Grid. Réglez le conteneur (direction, retour à la ligne, alignements, espacements, colonnes, rangées, zones nommées), cliquez sur une case de l'aperçu pour régler ses propriétés propres (order, flex-grow, étendue de colonnes ou de rangées…) et réduisez la largeur de l'aperçu pour voir le comportement sur un écran étroit. Le code CSS et le HTML correspondants sont générés en direct, avec seulement les valeurs utiles ou, si vous le souhaitez, toutes les valeurs par défaut.

Comment utiliser cet outil

1. Choisissez Flexbox (une seule direction) ou Grid (lignes et colonnes), ou partez d'un exemple : centrage, barre de navigation, étiquettes, colonnes égales, grille de cartes réactive, page en zones nommées.
2. Réglez le conteneur avec les listes et les curseurs : l'aperçu se met à jour instantanément.
3. Cliquez sur une case de l'aperçu pour régler ses propriétés individuelles (ordre, croissance, étendue, alignement propre).
4. Réduisez la largeur de l'aperçu pour tester le comportement sur petit écran, puis copiez le code CSS et le HTML.

Flexbox ou Grid : lequel choisir ?

Flexbox et Grid sont les deux systèmes de mise en page modernes de CSS. Ils ne se concurrencent pas : ils résolvent deux problèmes différents, et on les combine tous les jours.

Une règle pratique : si vous alignez des éléments le long d'une direction, pensez Flexbox ; si vous placez des éléments dans un tableau de cellules, pensez Grid. Une page type utilise une grille pour sa structure (en-tête, contenu, colonne latérale, pied de page), et Flexbox à l'intérieur de chaque zone.

Comprendre Flexbox : l'axe principal et l'axe transversal

Tout Flexbox repose sur deux axes. L'axe principal est celui de la direction du conteneur (flex-direction) : horizontal pour row, vertical pour column. L'axe transversal lui est perpendiculaire. Les propriétés d'alignement suivent ces axes, et non « horizontal » et « vertical » : c'est la source de la plupart des confusions.

Chaque élément peut aussi surcharger le comportement du conteneur : align-self (alignement propre), order (position visuelle) et surtout flex-grow, flex-shrink et flex-basis, qui décident comment il partage l'espace. Leurs valeurs initiales sont 0 1 auto : l'élément ne grandit pas, peut rétrécir et part de la taille de son contenu. La notation flex: 1 est un raccourci de flex: 1 1 0% : tous les éléments concernés se partagent l'espace disponible à parts égales. Par défaut, un élément flex ne rétrécit pas en dessous de la taille minimale de son contenu, d'où les débordements avec un long mot ou une image : ajoutez min-width: 0 à l'élément pour l'autoriser à rétrécir.

Comprendre Grid : colonnes, rangées, zones

Avec Grid, on décrit d'abord la grille sur le conteneur, puis les éléments s'y placent d'eux-mêmes, ou à l'endroit qu'on leur indique.

• grid-template-columns et grid-template-rows définissent les pistes. L'unité fr (« fraction ») répartit l'espace restant : 200px 1fr 2fr donne une colonne fixe, puis deux colonnes qui se partagent le reste dans un rapport de 1 à 2. La fonction repeat(3, 1fr) évite de répéter une valeur, et minmax(160px, 1fr) fixe une largeur minimale.
• Les grilles réactives sans media query. repeat(auto-fit, minmax(160px, 1fr)) demande au navigateur de placer autant de colonnes de 160 px minimum que la largeur le permet. Les mots-clés auto-fit et auto-fill ne diffèrent que lorsqu'il y a moins d'éléments que de colonnes possibles : auto-fill conserve les colonnes vides, auto-fit les réduit à zéro et laisse les éléments s'étirer pour occuper la place.
• Les zones nommées. grid-template-areas dessine la mise en page avec des noms de zones, une chaîne par rangée. Il suffit ensuite d'écrire grid-area: main sur un élément pour qu'il occupe la zone « main ». Les zones doivent former des rectangles.
• L'étendue. grid-column: span 2 fait occuper deux colonnes à un élément ; grid-row: span 2, deux rangées.
• La grille implicite. Les éléments en trop créent automatiquement de nouvelles rangées (ou colonnes avec grid-auto-flow: column) dont la taille se règle avec grid-auto-rows.

Quatre recettes à connaître

1. Centrer un élément dans son parent (horizontalement et verticalement) :

.container {
  display: grid;
  place-items: center;
  min-height: 240px;
}

2. Pousser le dernier élément à droite dans une barre de navigation flex : une marge automatique absorbe tout l'espace libre.

.nav { display: flex; gap: 16px; }
.nav .compte { margin-left: auto; }

3. Une page dont le pied reste en bas, même quand le contenu est court :

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

4. Une grille de cartes réactive, qui s'adapte à toute largeur sans media query :

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}

Ces quatre cas se reproduisent avec l'outil : choisissez l'exemple correspondant, ajustez-le, et utilisez le curseur de largeur de l'aperçu pour vérifier son comportement.

Les pièges classiques (et comment les éviter)

• Un élément qui déborde au lieu de rétrécir. Un élément flex ou une colonne 1fr ne descend pas sous la taille minimale de son contenu. Un texte long sans espace, une URL ou un tableau peut alors faire déborder la page. Remèdes : min-width: 0 sur l'élément flex, minmax(0, 1fr) à la place de 1fr pour une colonne de grille, et overflow-wrap: anywhere pour le texte.
• Un alignement qui ne fait rien. justify-content n'a d'effet que s'il reste de la place sur l'axe principal ; align-items: center ne se voit que si le conteneur est plus haut que ses éléments (donnez-lui une hauteur) ; align-content exige plusieurs lignes (flex-wrap: wrap).
• Un align-items: stretch sans effet. L'étirement ne s'applique qu'aux éléments dont la hauteur est automatique : une hauteur fixée l'emporte.
• Un ordre visuel qui diffère de l'ordre du code. order, les valeurs -reverse et le placement dans une grille ne changent que l'affichage, pas l'ordre de lecture des lecteurs d'écran ni l'ordre de tabulation. Pour la spécification, ils ne doivent pas servir à remplacer un ordre correct dans le code : un utilisateur du clavier verrait son focus sauter d'un endroit à l'autre de l'écran. Écrivez le HTML dans l'ordre logique et réservez l'order aux ajustements purement visuels.
• Des pourcentages et des marges mal combinés. Préférez la propriété gap aux marges entre éléments : elle ne produit pas d'espace superflu aux extrémités, et fonctionne aujourd'hui avec Flexbox dans tous les navigateurs courants.

Pour la couleur des cases et des fonds de votre mise en page, essayez le générateur de palettes ; pour les arrondis et les ombres, le générateur de border-radius et le générateur d'ombres.

Questions fréquentes