CSS Grid Generator - Générateur de grille CSS en glisser-déposer

• Un outil qui facilite la création de mises en page CSS Grid personnalisées
  • Il permet de définir facilement le nombre de colonnes, de lignes et l’espacement à l’aide de la souris
• Mode d’emploi
  • Définir les colonnes, les lignes et l’espacement selon vos besoins
  • Cliquer sur le rectangle avec le signe + pour ajouter un nouvel élément à la grille
  • Utiliser la poignée située dans l’angle inférieur droit pour redimensionner le DIV
  • Réorganiser le DIV en le faisant glisser-déposer à l’emplacement souhaité
  • Enfin, copier le code HTML et CSS généré puis le coller dans votre projet
• Après avoir créé Tailwind Grid Generator et reçu des retours positifs, l’auteur a développé sur cette base un outil pour le CSS pur

[GN⁺]

Commentaires sur Hacker News

• Après avoir ajouté quelques boîtes puis les avoir déplacées en les faisant se chevaucher, un problème survient : elles sortent des limites de la grille
• J’ai créé un Tailwind Grid Generator qui a reçu des retours positifs, et j’ai développé à partir de là un outil pour le CSS pur
• Le réagencement dynamique est un problème plus difficile que la configuration de la grille
  • En consultant MDN, j’ai trouvé comment faire en sorte que la grille réduise ou augmente le nombre de colonnes
  • Un utilitaire simple est utile pour simplifier les tâches répétitives
  • Il serait utile de stocker l’état de configuration de la grille dans l’URL
• Le générateur est utile comme outil d’apprentissage, et une fois qu’on comprend la syntaxe et les fonctionnalités, on peut l’utiliser de façon plus souple
  • Chrome Dev Tools est aussi utile pour modifier la grille et voir immédiatement les changements
  • J’ai écrit un article sur la grille
• En tant que vieux programmeur, j’ai l’habitude de faire des grilles avec des tables, mais les layouts CSS sont difficiles
  • Ce genre d’outil m’aide énormément
• J’avais trouvé un générateur de site similaire il y a quelques années, mais il n’avait pas de fonction de drag-and-drop
  • J’y ai appris les concepts de base de CSS Grid comme grid-template-columns, gap, etc.
  • J’espère que ce bon travail continuera
• Quand Grid est apparu pour la première fois, je pensais qu’il allait fondamentalement transformer les layouts web à partir des template areas
  • Je n’ai pas réussi à créer de framework interne et j’ai utilisé flex
  • Puis Tailwind est arrivé et a répondu à tous les besoins pour écrire rapidement des frontends responsives
  • Je me demande si quelqu’un connaît un bon framework ou des exemples utilisant les template areas
  • J’utiliserai cet outil la prochaine fois que je travaillerai avec Grid
• J’ai trouvé deux bugs
  • Quand on redimensionne la fenêtre du navigateur, la largeur ne réagit pas
  • Comme les boîtes sont plus courtes que le conteneur, une nouvelle ligne apparaît plus haut dans la grille
• Je ne suis pas développeur web, mais j’imagine qu’il peut y avoir des cas où plus de 12 colonnes sont nécessaires
  • Quand on saisit un nombre plus grand, les colonnes sont analysées de façon étrange
• L’UX est vraiment excellente
  • Je ne crée pas souvent des layouts de page, donc je n’ai pas appris en profondeur la syntaxe de Grid, mais je vais mettre cet outil dans mes favoris