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 colonnes et des lignes, en ajustant leurs dimensions et en spécifiant les espacements. L'utilisateur dessine directement les éléments enfants en faisant glisser le curseur sur les cellules de la grille. L'outil traduit instantanément cette configuration visuelle en code CSS et HTML prêt à être intégré dans un projet.
Le processus de création repose sur des paramètres précis:
- 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 CSS valide pour une piste de grille, telle que
1fr,200px,auto,min-contentouminmax(120px, 1fr). - Taille des lignes: Toute valeur CSS valide, par exemple
1fr,200px,auto,min-contentouminmax(120px, 1fr). - Placement des éléments: Sélection d'une zone rectangulaire en glissant sur plusieurs cellules.
Règles de génération du code et cas limites
Le comportement de la grille et la production du code respectent des règles strictes basées sur les actions de l'utilisateur:
- Tracé des éléments: Lorsque l'utilisateur maintient le clic et glisse sur les cellules, le relâchement de la souris crée un élément enfant qui s'étend sur les colonnes et lignes sélectionnées. Chaque élément génère une règle
grid-columnetgrid-rowspécifique dans le CSS, ainsi qu'une balisedivcorrespondante dans le HTML. - Superposition: Les éléments peuvent se chevaucher. L'élément dessiné en dernier se place au-dessus des autres sur l'axe de empilement. Cliquer sur le bouton « × » d'un élément permet de le supprimer.
- Optimisation du CSS: Si plusieurs colonnes ou lignes consécutives partagent exactement la même taille, l'outil simplifie le code généré en utilisant la notation
repeat(). - Fusion des espacements: Bien que l'espace colonnes et l'espace lignes se règlent de manière indépendante, le code CSS généré fusionne ces propriétés en une seule règle
gaplorsqu'elles possèdent la même valeur. - Limites de l'interface: L'outil accepte un maximum de 16 éléments dessinés simultanément.
- Gestion des erreurs de saisie: Si une valeur incorrecte (par exemple
not-a-grid-track) est saisie dans le champ de taille d'une piste, le champ est marqué comme invalide. Toutefois, le code CSS généré conserve la dernière valeur valide enregistrée pour éviter de casser la mise en page. - Contrôles 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 élément HTML dans le conteneur.
Préréglages de mise en page disponibles
Pour accélérer la création de structures courantes, l'outil propose plusieurs configurations prédéfinies sous la section « Préréglages »:
| Préréglage | Description et structure générée |
|---|---|
| Barre latérale | Structure classique avec une colonne étroite pour la navigation et une colonne principale pour le contenu. |
| En-tête et pied | Disposition verticale comprenant une zone supérieure (header), une zone centrale et une zone inférieure (footer). |
| Galerie | Configuration automatique de 3 colonnes, 2 lignes et 3 éléments répartis sur la grille. |
| Tableau de bord | Agencement multi-colonnes et multi-lignes adapté à la présentation de modules et de graphiques. |
Confidentialité et traitement des données
Le fonctionnement de cet outil respecte la confidentialité des données de l'utilisateur. La construction de la grille s'effectue localement, directement dans le navigateur web de l'utilisateur. Aucune des configurations, dimensions ou structures définies dans l'interface n'est envoyée à BroBroGo ou vers un serveur externe.
FAQ
Comment placer des éléments sur la grille? Maintenez et faites glisser sur les cellules pour tracer un rectangle: au relâchement, il devient un enfant qui couvre ces colonnes et ces lignes. Chaque élément que vous tracez reçoit sa propre règle grid-column et grid-row dans le CSS et un div correspondant dans le HTML. Les éléments peuvent se chevaucher, et le dernier tracé passe au-dessus; utilisez le × de l’élément pour le retirer.
Les colonnes et les lignes peuvent-elles avoir des tailles différentes? Oui. Chaque piste a sa propre case de taille, où vous pouvez saisir n’importe quelle valeur de grille: 1fr, 200px, auto, min-content ou minmax(120px, 1fr). Les pistes de même taille sont regroupées en repeat() pour garder un code court. L’espacement des colonnes et celui des lignes se règlent séparément et fusionnent en un seul gap lorsqu’ils coïncident.
Que faire du code généré? Copiez le CSS et le HTML ensemble. Le HTML vous donne le conteneur avec un div par élément, et le CSS définit la grille et place chacun. Collez les deux dans votre projet et vous obtenez la même mise en page que celle tracée ici.