CSS Grid Generator - Drag-and-Drop-CSS-Grid-Generator

 (cssgridgenerator.io)
18 Punkte von GN⁺ 2024-07-14 | 1 Kommentare | Auf WhatsApp teilen
  • Ein Tool, das dabei hilft, benutzerdefinierte CSS-Grid-Layouts einfacher zu erstellen
    • Spalten, Zeilen und Abstandsgrößen lassen sich bequem per Mausaktion festlegen
  • So wird es verwendet
    • Spalten, Zeilen und Abstände nach Bedarf festlegen
    • Auf das Rechteck mit dem +-Symbol klicken, um dem Grid ein neues Element hinzuzufügen
    • Die Größe des DIVs mit dem Handle in der unteren rechten Ecke anpassen
    • Das DIV per Drag-and-Drop an die gewünschte Position verschieben
    • Zum Schluss den generierten HTML- und CSS-Code kopieren und in das Projekt einfügen
  • Nach der Entwicklung des Tailwind Grid Generator und positivem Feedback darauf wurde auf dieser Grundlage ein Tool für plain CSS entwickelt

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-07-14
Hacker-News-Kommentare
  • Nach dem Hinzufügen einiger Boxen tritt ein Problem auf, bei dem sie beim überlappenden Verschieben die Grid-Grenzen verlassen.
  • Es wurde ein Tailwind Grid Generator erstellt, der positives Feedback erhalten hat; darauf aufbauend wurde ein Tool für plain CSS entwickelt.
  • Das schwierigere Problem ist eher die dynamische Neuanordnung als die Grid-Konfiguration.
    • Unter Bezug auf MDN wurde herausgefunden, wie das Grid Spalten verringern oder erhöhen kann.
    • Ein einfaches Utility ist nützlich, um wiederkehrende Aufgaben zu vereinfachen.
    • Es wäre nützlich, den Zustand der Grid-Konfiguration in der URL zu speichern.
  • Der Generator ist als Lernwerkzeug nützlich, und wenn man die Syntax und Funktionen versteht, kann man ihn flexibler einsetzen.
    • Auch Chrome Dev Tools ist nützlich, um das Grid zu bearbeiten und Änderungen sofort zu sehen.
    • Es wurde ein Beitrag über Grid geschrieben.
  • Als Programmierer alter Schule bin ich es gewohnt, Grids mit Tabellen zu erstellen, aber CSS-Layouts sind schwierig.
    • Solche Tools sind sehr hilfreich.
  • Vor ein paar Jahren wurde ein ähnlicher Site-Generator gefunden, aber er hatte keine Drag-and-Drop-Funktion.
    • Dabei wurden Grundkonzepte von CSS Grid wie grid-template-columns, gap usw. gelernt.
    • Hoffentlich geht die gute Arbeit weiter.
  • Als Grid zum ersten Mal erschien, dachte man, dass es Web-Layouts auf Basis von Template Areas grundlegend verändern würde.
    • Es kam nicht dazu, ein internes Framework zu bauen, und stattdessen wurde flex verwendet.
    • Dann kam Tailwind und erfüllte alles, was man brauchte, um schnell responsive Frontends zu schreiben.
    • Es wird gefragt, ob jemand ein gutes Framework oder Beispiele kennt, die Template Areas verwenden.
    • Beim nächsten Mal, wenn mit Grid gearbeitet wird, wird dieses Tool verwendet.
  • Es wurden zwei Bugs gefunden.
    • Wenn die Größe des Browserfensters geändert wird, reagiert die Breite nicht.
    • Die Boxen sind niedriger als der Container, wodurch neue Zeilen im Grid höher positioniert werden.
  • Ich bin kein Webentwickler, aber es scheint Fälle zu geben, in denen mehr als 12 Spalten benötigt werden.
    • Wenn eine größere Zahl eingegeben wird, werden die Spalten merkwürdig geparst.
  • Die UX ist sehr gut.
    • Ich erstelle nicht oft Seitenlayouts und habe die Grid-Syntax daher nie tiefgehend gelernt, aber ich werde mir dieses Tool als Lesezeichen speichern.