⭐ 0
🔍
Texte Image PDF & Docs Audio Musique Électronique Temps Utilitaires Validateurs Ésotérisme Jeux

Générateur CSS Grid

Concevez visuellement des mises en page CSS Grid : définissez les colonnes, les lignes et l’espacement, puis tapez des noms de zone dans les cellules pour construire grid-template-areas — avec un aperçu en direct et du code CSS et HTML prêt à copier.

🔒 Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.

Tapez un nom dans n'importe quelle cellule ci-dessous ; les cellules portant le même nom fusionnent en une seule région grid-template-areas.

Traitement en cours... 0%

Résultat

Une déclaration grid-template-areas est l’un des morceaux de CSS les plus lisibles qui soient, mais seulement une fois qu’elle existe — y parvenir à la main implique de compter des chaînes entre guillemets et de faire correspondre les longueurs de ligne, et une seule cellule mal assortie casse silencieusement toute la mise en page. Ce générateur transforme cela en manipulation directe : définissez le nombre de colonnes et de lignes, tapez un nom dans n’importe quelle cellule de la grille en direct, et les cellules portant le même nom fusionnent automatiquement en une seule région nommée.

Sous le capot, chaque cellule que vous laissez vide devient un point dans la chaîne grid-template-areas générée, et chaque cellule que vous nommez devient une partie du rectangle de ce nom. CSS n’autorise une région nommée qu’à occuper un seul bloc rectangulaire propre, donc l’outil vérifie cela au fur et à mesure que vous tapez et vous indique exactement quand un nom ne forme pas encore un rectangle valide — au lieu de produire silencieusement du CSS que le navigateur rejettera.

L’espacement des colonnes et l’espacement des lignes valent par défaut 8px et se combinent en une seule ligne gap lorsqu’ils correspondent, et la grille d’aperçu en direct reflète toujours vos pistes grid-template-columns et grid-template-rows, y compris les colonnes en pixels fixes provenant d’un préréglage comme les rails latéraux de 200px du Saint Graal. Le résultat copiable couvre les deux aspects : un bloc CSS prêt pour votre feuille de style et un squelette HTML correspondant avec une div grid-area par région nommée.

Grid et flexbox résolvent des problèmes de mise en page différents, et le css-flexbox-generator sur ce site est le meilleur point de départ pour les dispositions unidimensionnelles — une seule ligne ou colonne d’éléments flexibles comme une barre de navigation ou une pile de cartes. Utilisez plutôt ce générateur de grille lorsque vous avez besoin d’un contrôle bidimensionnel, de lignes et de colonnes explicites, ou de régions nommées comme en-tête/nav/principal/pied de page ; les deux outils se retrouvent souvent sur la même page, grid pour la structure de la page et flexbox à l’intérieur de ses éléments. Comme tous les outils de ce site, il s’exécute entièrement dans votre navigateur — pas de téléversement, pas de compte.

Vous appréciez cet outil ? Vous trouvez ce produit utile ? Vous y voyez du potentiel et souhaitez le soutenir ?

🛡️
Exécuté dans le navigateur

Vos fichiers et données ne quittent jamais cet appareil. Le traitement est entièrement hors connexion. 100 % sécurisé.

Formats acceptés et règles

  • Des champs numériques pour 1 à 6 colonnes et lignes, ainsi que des commandes distinctes pour l’espacement des colonnes et l’espacement des lignes, qui se combinent en une seule valeur gap lorsqu’elles correspondent.
  • Un mode zones nommées : tapez un nom de zone directement dans une cellule de la grille en direct ; l’outil construit une chaîne grid-template-areas valide et vous avertit lorsque les noms ne forment pas des rectangles complets.
  • Bloc CSS copiable (display: grid, grid-template-columns/rows, gap, grid-template-areas) ainsi qu’un squelette HTML correspondant avec une div grid-area par région nommée.

Principaux avantages

✓ Tapez un nom directement dans n’importe quelle cellule et les cellules portant le même nom fusionnent automatiquement en une seule région de grid-template-areas — sans sélection à la souris, sans deviner la syntaxe des chaînes entre guillemets.
✓ La prévisualisation en direct redimensionne et recolore la grille à chaque modification, vous montrant exactement les pistes de colonnes et de lignes ainsi que chaque région nommée avant de copier la moindre ligne de CSS.
✓ Des préréglages comme la mise en page classique du Saint Graal ou une barre latérale étroite vous fournissent une véritable déclaration grid-template-areas fonctionnelle comme point de départ, plutôt qu’une grille vide.

Cas d'utilisation

  • • Construisez la structure de page classique en « holy grail » — en-tête et pied de page pleine largeur avec une ligne centrale nav/contenu/latéral — en saisissant des noms de zone au lieu d’écrire grid-template-areas à la main.
  • • Mettez en page une page de paramètres ou un tableau de bord d’administration avec une barre latérale de largeur fixe à côté d’une colonne de contenu flexible, puis copiez le CSS et le HTML exacts une fois que l’aperçu en direct vous convient.
  • • Vérifiez qu’un ensemble de zones nommées forme bien des rectangles valides avant la mise en production — l’outil signale précisément les noms qui casseraient grid-template-areas dans le navigateur.