Générateur de Grille CSS

Bienvenue sur le Générateur CSS Grid — un outil de construction visuel gratuit et interactif qui transforme vos clics en code CSS Grid propre et prêt à l'emploi. Que vous conceviez la structure d'une mise en page Saint Graal, prototypiez une galerie de photos ou appreniez le fonctionnement de grid-template-columns et grid-area, cet outil vous offre un aperçu en direct, des contrôles de taille par piste et un export en un clic — sans installation, sans inscription et sans back-end.

Qu'est-ce que le générateur CSS Grid ?

Cet outil est un terrain de jeu pour les mises en page bidimensionnelles. Vous définissez des lignes et des colonnes, cliquez sur les cellules pour placer des éléments, étendez les blocs sur plusieurs pistes et observez la mise à jour du CSS généré en temps réel. Contrairement à la plupart des générateurs qui ne produisent que des grid-template-columns, celui-ci prend en charge le placement par élément (grid-row / grid-column), les étendues multi-cellules, la numérotation animée des lignes de grille pour les débutants, et six préréglages éprouvés que vous pouvez charger instantanément.

Ce qui rend ce générateur différent

Que signifie l'unité fr dans CSS Grid ?

L'unité fr représente une fraction de l'espace libre disponible dans le conteneur de la grille. Une fois les tailles fixes (px, em, %) soustraites, l'espace restant est divisé proportionnellement entre les pistes fr. Par exemple, 1fr 2fr 1fr donne à la colonne centrale deux fois plus d'espace libre qu'aux autres. fr est le moyen le plus courant de créer des mises en page flexibles et proportionnelles qui s'adaptent à la taille du conteneur sans requêtes média.

Quelle est la différence entre CSS Grid et Flexbox ?

Flexbox est unidimensionnel et organise les éléments le long d'un seul axe (une ligne ou une colonne). CSS Grid est bidimensionnel et contrôle les lignes et les colonnes en même temps. Utilisez Flexbox pour les barres de navigation, les groupes de boutons ou les rangées simples de cartes. Utilisez Grid pour les mises en page de pages complètes, les galeries photo, les tableaux de bord et tout design nécessitant un alignement précis sur les deux axes. De nombreuses interfaces modernes combinent les deux — Grid pour le squelette de la page, Flexbox à l'intérieur des cellules individuelles.

Comment faire pour qu'un élément de grille s'étende sur plusieurs cellules ?

Utilisez grid-column et grid-row avec le mot-clé span ou des numéros de ligne explicites. Par exemple, grid-column: span 2 rend un élément large de deux colonnes, tandis que grid-column: 1 / 4 le fait s'étendre de la ligne 1 à la ligne 4. grid-row: 2 / span 3 commence à la ligne 2 et s'étend sur trois lignes. Dans ce générateur, cliquez sur n'importe quel élément pour le sélectionner, puis utilisez les boutons fléchés du panneau latéral pour augmenter ou réduire son étendue — le CSS se met à jour instantanément.

Qu'est-ce que minmax() dans CSS Grid ?

minmax(min, max) définit une taille de piste avec une limite inférieure et supérieure. Il est le plus souvent associé à auto-fit ou auto-fill dans repeat() pour créer des grilles réactives sans requêtes média. Par exemple, repeat(auto-fit, minmax(200px, 1fr)) crée autant de colonnes de 200px minimum que possible dans le conteneur, et les étire pour partager l'espace restant équitablement — le modèle canonique pour les grilles de cartes réactives.

Comment utiliser cet outil

1. Choisissez un préréglage de départ — cliquez sur l'un des six préréglages en haut pour charger un exemple concret, ou construisez à partir de zéro.
2. Définissez les lignes et les colonnes — utilisez les compteurs pour ajouter ou supprimer des pistes, et modifiez chaque taille de piste avec fr, px, %, auto ou minmax().
3. Placez et étendez les éléments — cliquez sur une cellule vide pour ajouter un élément, ou sur un élément existant pour le sélectionner et utiliser les flèches d'étendue.
4. Ajustez les espacements et l'alignement — réglez les espaces entre lignes et colonnes avec les curseurs, et choisissez justify-items et align-items dans les menus déroulants.
5. Activez la superposition des lignes — affichez les numéros de lignes pour voir précisément où se trouvent les lignes 1, 2, 3 — idéal pour comprendre le placement.
6. Copiez ou téléchargez — basculez entre les onglets CSS et HTML, puis cliquez sur Copier ou Télécharger pour récupérer le code généré.

Les six préréglages intégrés

Cas d'utilisation pratiques

Pour les développeurs Frontend

• Prototyper rapidement des squelettes de pages avant d'écrire le code des composants
• Générer des extraits repeat(auto-fit, minmax()) pour des grilles de cartes réactives
• Tester visuellement grid-template-areas avant de s'engager dans une structure
• Exporter ensemble le CSS du conteneur et la structure HTML correspondante

Pour les designers et les apprenants

• Voir exactement comment se comportent fr, auto et minmax() avec un aperçu en direct
• Afficher les numéros de ligne pour comprendre le placement basé sur les lignes
• Expérimenter avec les valeurs d'étendue sans écrire une ligne de code
• Comparer les préréglages côte à côte pour apprendre les modèles Grid idiomatiques

Pour les formateurs et les blogueurs

• Démontrer les concepts de Grid en atelier avec la superposition visuelle
• Générer des exemples de code propres pour des tutoriels en quelques secondes
• Montrer comment la même structure CSS Grid s'adapte de 4 à 12 colonnes

Conseils pour un CSS Grid plus propre

• Préférez fr au lieu de % — fr respecte les espacements (gaps), alors que % ne le fait pas, ce qui peut provoquer des débordements.
• Utilisez grid-template-areas pour les régions nommées — beaucoup plus lisible que les numéros de lignes et auto-documenté.
• Utilisez minmax() avec auto-fit pour des grilles réactives sans media queries.
• Définissez des espacements explicites avec gap: 1rem au lieu de marges sur les éléments — les gaps ne fusionnent jamais et ne nécessitent aucun nettoyage.
• Combinez Grid et Flexbox — Grid pour le squelette de la page, Flexbox à l'intérieur des cellules. Ne forcez pas un outil à faire les deux jobs.

Foire Aux Questions

Ce générateur prend-il en charge grid-template-areas ?

Le préréglage Saint Graal utilise grid-template-areas dans son CSS exporté. Pour les autres préréglages, nous utilisons le placement par lignes (grid-column / grid-row) car il s'adapte plus souplement lorsque vous cliquez et réorganisez les éléments.

Puis-je aussi exporter le HTML ?

Oui — passez à l'onglet HTML dans le panneau d'exportation pour copier une structure HTML prête à l'emploi qui correspond exactement au CSS généré.

Le CSS généré fonctionnera-t-il sur les anciens navigateurs ?

CSS Grid est pris en charge par tous les navigateurs modernes (Chrome, Edge, Firefox, Safari) et IE11 avec une implémentation partielle. Pour les navigateurs modernes, aucun correctif n'est nécessaire. Si vous devez supporter IE11, privilégiez le placement par lignes (pas de gap, pas de minmax(), pas de repeat(auto-fit)) et testez rigoureusement.

L'outil est-il stocké dans mon navigateur ?

Tout s'exécute côté client en JavaScript. Rien n'est envoyé à un serveur, donc votre mise en page, les noms de vos éléments et votre configuration restent privés sur votre machine.

Cela fonctionne-t-il sur mobile ?

Oui — le constructeur se réorganise en une seule colonne sur les téléphones, les contrôles restent accessibles et l'aperçu reste interactif sur les écrans tactiles.

Ressources complémentaires

• Mise en page en grille CSS - MDN Web Docs
• CSS Grid Layout Module Level 2 - Spécification W3C
• CSS Grid Layout - Wikipédia