Générateur CSS grid

Convertissez un esquisse de mise en page en grille CSS fonctionnelle avec zones nommées.

Entrée

Écartement (px)Largeur des colonnesHauteur des lignesAjouter des règles grid-area par sectionAjouter une variante responsive une seule colonnePréfixe du nom de classeInclure HTML d'exemple

Sortie

Générateur CSS grid

Collez une esquisse rapide de mise en page et cet outil la transforme en code CSS grid fonctionnel. Écrivez chaque ligne de la mise en page sur sa propre ligne et répétez le même mot dans les cellules pour marquer une région nommée — « header header » sur une ligne, « nav main » sur la suivante, « footer footer » sur la dernière décrit une mise en page classique à trois lignes avec en-tête et pied de page pleine largeur. L'outil lit les noms répétés comme des zones de grille et génère automatiquement la déclaration grid-template-areas correspondante.

Les options contrôlent le reste du CSS généré. Définissez l'écartement entre les cellules en pixels et fournissez optionnellement des largeurs de colonne ou hauteurs de ligne en utilisant n'importe quelle taille de piste CSS — fr, auto ou minmax(); laissez vide pour un espacement égal. Activez les règles par zone pour obtenir une déclaration grid-area prête à l'emploi pour chaque section nommée avec le préfixe de classe que vous choisissez. Une bascule responsive ajoute une requête média max-width qui adapte la mise en page pour les écrans étroits, et une bascule HTML inclut un squelette de balisage correspondant. Un compteur en direct sous la sortie suit les lignes de mise en page, les zones nommées et les caractères du CSS généré.

Si deux cellules portant le même nom ne forment pas un rectangle solide — une forme en L ou un nom qui omet une cellule — la vraie grille CSS ne peut pas rendre cette zone correctement, l'outil le signale directement comme commentaire d'avertissement au lieu de générer silencieusement des règles invalides. Les fins de ligne de tout système d'exploitation sont traitées de la même manière.

Tout s'exécute localement dans votre navigateur ; la mise en page et le CSS ne sont jamais envoyés nulle part. Copiez le résultat, téléchargez-le en tant que fichier .txt ou envoyez-le à un autre outil comme le formateur CSS pour affiner l'indentation davantage.

FAQ

Comment puis-je marquer une zone de grille ?

Répétez le même mot dans les cellules qui doivent appartenir à une région. Toute séquence du même nom qui forme un rectangle devient une zone nommée dans grid-template-areas.

Qu'est-ce qu'un point ou une cellule vide signifie ?

Une cellule laissée comme un seul « . » est une cellule de grille vide sans zone assignée, exactement comme « . » dans grid-template-areas. Les lignes avec moins de mots que les autres sont complétées avec des points automatiquement.

Puis-je définir des tailles de colonne et de ligne personnalisées ?

Oui. Entrez des tailles de pistes séparées par des espaces telles que « 1fr 2fr auto » ou « minmax(200px, 1fr) » dans les champs de colonne et de ligne. Si le nombre de valeurs ne correspond pas à la grille, l'outil revient à des pistes de largeur égale.

Pourquoi ai-je reçu un avertissement sur une zone ?

CSS grid ne supporte que les zones qui forment un rectangle solide. Si vos cellules nommées forment une forme en L ou omettent une cellule, l'outil imprime un commentaire d'avertissement au-dessus du CSS pour que vous puissiez le corriger avant de l'utiliser.

Mon esquisse de mise en page est-elle téléchargée quelque part ?

Non. Le générateur CSS grid s'exécute entièrement dans votre navigateur — votre mise en page et le code généré ne quittent jamais votre appareil.

Générateur CSS grid

Outils connexes

Générateur CSS grid

FAQ