Appuyez sur Ctrl+D pour ajouter cette page aux favoris
Le générateur CSS Grid est un outil en ligne gratuit qui conçoit visuellement des dispositions en grille.
Comment utiliser Générateur CSS Grid ?
Définissez le nombre de lignes et de colonnes.
Glissez les cellules pour fusionner des zones ou ajuster le placement.
Copiez le code CSS Grid généré et utilisez-le dans votre projet.
Questions fréquentes sur Générateur CSS Grid
Quelle est la différence entre CSS Grid et Flexbox ?
CSS Grid est pour les layouts 2D (lignes + colonnes), tandis que Flexbox est pour les layouts 1D (ligne ou colonne). Grid convient mieux aux layouts de page complexes.
Qu'est-ce que l'unité fr ?
fr (fraction) est une unité proportionnelle utilisée dans CSS Grid. Par exemple, 1fr 2fr divise l'espace dans un ratio 1:2. Très utile pour les layouts responsifs.
Peut-on créer une grille responsive sans media queries ?
Oui. En écrivant repeat(auto-fit, minmax(240px, 1fr)), vous ne fixez que la largeur minimale de colonne et laissez le navigateur calculer le reste : les colonnes s'ajoutent quand la fenêtre s'élargit et disparaissent quand elle se réduit, du téléphone au bureau sans un seul point de rupture. Attention : auto-fill laisse des pistes vides dans l'espace restant tandis qu'auto-fit étire les colonnes existantes pour le combler, d'où une différence quand les éléments sont peu nombreux.
Un mot long élargit une colonne de la grille et casse la mise en page.
Les éléments de grille ont par défaut une taille minimale automatique : ils refusent de descendre sous la largeur de leur contenu, si bien qu'une URL longue ou un mot insécable écarte toute la colonne. Appliquer min-width: 0 à cet élément permet à la grille de le rétrécir à nouveau, et overflow-wrap: anywhere fait passer la longue chaîne à la ligne. Définir la piste en minmax(0, 1fr) plutôt qu'en 1fr supprime la cause à la racine, d'où sa popularité.
Comment bien utiliser Générateur CSS Grid ?
repeat(auto-fit, minmax(240px, 1fr)) se réorganise tout seul, sans media query.
Utilisez gap plutôt que des marges, sinon la dernière colonne garde un espace en trop.
Pour les mises en page complexes, nommez les zones avec grid-template-areas : c'est bien plus lisible.