Générateur de Grid CSS

Fonctionnement du Générateur de Grid CSS

Le Générateur de Grid CSS est un outil visuel conçu pour structurer des mises en page web en définissant des grilles bidimensionnelles. L'interface permet de configurer le nombre de colonnes et de lignes, d'ajuster leurs dimensions respectives et de déterminer les espaces inter-éléments.

En glissant le curseur de la souris sur les cellules de la grille, vous délimitez des zones rectangulaires pour positionner des éléments enfants. L'outil traduit instantanément ces actions visuelles en code CSS et HTML propre, prêt à être intégré dans vos feuilles de style et vos fichiers de structure.

Configuration des paramètres d'entrée

La création d'une grille repose sur la définition de paramètres précis pour les pistes et les espacements:

• Colonnes: Un nombre entier compris entre 1 et 12.
• Lignes: Un nombre entier compris entre 1 et 12.
• Espace colonnes: Une valeur numérique comprise entre 0 et 48px.
• Espace lignes: Une valeur numérique comprise entre 0 et 48px.
• Taille des colonnes: Toute valeur de dimension acceptée par la spécification CSS Grid, telle que 1fr, 200px, auto, min-content ou minmax(120px, 1fr).
• Taille des lignes: Toute unité CSS Grid valide, par exemple 1fr, 200px, auto, min-content ou minmax(120px, 1fr).
• Placement des éléments: Le tracé d'une zone rectangulaire en maintenant le clic gauche de la souris enfoncé sur un ensemble de cellules.

Code généré en sortie

L'outil produit deux blocs de code distincts mis à jour en temps réel:

• CSS: Les règles de style pour le conteneur de la grille (déclarant display: grid et les pistes), ainsi que les règles de positionnement spécifiques pour chaque élément enfant placé.
• HTML: La structure du conteneur parent sous forme de balise div contenant les éléments enfants div générés pour chaque zone dessinée.

Règles de comportement et cas limites

Le générateur applique des règles strictes pour assurer la validité du code produit:

• Création d'éléments: Lorsque vous relâchez le bouton de la souris après un glissement sur les cellules, un élément enfant est créé. Cet élément s'étend sur les colonnes et les lignes sélectionnées.
• Génération des sélecteurs: Chaque élément dessiné obtient sa propre règle grid-column et grid-row dans le CSS, associée à un div correspondant dans le HTML.
• Superposition: Les éléments peuvent se chevaucher. L'élément dessiné en dernier s'affiche au-dessus des précédents dans l'ordre d'empilement.
• Suppression: Cliquer sur l'icône « × » d'un élément le retire de la grille. L'action « Vider les éléments » réinitialise la grille, ce qui produit un conteneur HTML vide et un compteur de 0 élément. L'action « Ajouter un élément » génère un nouvel élément HTML.
• Limites de capacité: L'outil prend en charge un maximum de 16 éléments simultanés.
• Optimisation du CSS: Si plusieurs colonnes ou lignes consécutives partagent la même taille, l'outil regroupe ces définitions en utilisant la fonction repeat() dans le CSS de sortie. De même, si l'espace colonnes et l'espace lignes sont identiques, les propriétés individuelles fusionnent en une seule propriété raccourcie gap.
• Gestion des erreurs de saisie: Si une valeur non valide (par exemple not-a-grid-track) est saisie dans le champ de taille d'une piste, le champ est marqué comme non valide. Toutefois, le code CSS généré conserve la dernière valeur valide enregistrée pour éviter de casser la mise en page.

Préréglages et gabarits de mise en page

Pour accélérer le prototypage, l'outil propose quatre préréglages: Barre latérale, En-tête et pied de page, Galerie et Tableau de bord. Le préréglage Galerie produit 3 colonnes, 2 lignes et 3 éléments.

Confidentialité et traitement des données

Votre grille est générée directement dans votre navigateur. Rien de ce que vous configurez ici n'est téléversé vers BroBroGo.

FAQ

Comment puis-je placer des éléments sur la grille?
Cliquez et glissez votre curseur sur les cellules pour délimiter un rectangle — lorsque vous relâchez, cela crée un élément enfant positionné sur ces colonnes et lignes. Chaque élément tracé génère ses propres règles grid-column et grid-row dans le CSS, ainsi qu'une balise div correspondante dans le HTML. Les éléments peuvent se chevaucher, le plus récent s'affichant au-dessus; utilisez l'icône × sur un élément pour le supprimer.

Les colonnes et les lignes peuvent-elles avoir des tailles différentes?
Oui. Chaque piste dispose de son propre champ de saisie de taille, où vous pouvez spécifier n'importe quelle valeur valide en CSS Grid — comme 1fr, 200px, auto, min-content ou minmax(120px, 1fr). Les pistes partageant la même taille sont regroupées à l'aide de la fonction repeat() pour optimiser le code. L'espacement des colonnes (column gap) et des lignes (row gap) se configurent séparément, et fusionnent en une seule propriété gap lorsqu'ils sont identiques.

Que dois-je faire avec le code généré?
Copiez le code CSS et le code HTML générés. Le HTML fournit la structure du conteneur avec un div pour chaque élément, tandis que le CSS définit la grille et positionne chacun d'eux. Collez les deux dans votre projet pour obtenir exactement la mise en page que vous avez dessinée.

Quelle est la limite du nombre d'éléments que je peux ajouter?
Le générateur permet de placer et de configurer un maximum de 16 éléments sur une même grille.