CSS-Grid-Generator

Funktionsweise des CSS-Grid-Generators

Der CSS-Grid-Generator ist ein visuelles Werkzeug, mit dem sich zweidimensionale Layouts direkt im Browser entwerfen lassen. Durch die Definition von Spalten und Zeilen, deren Größen sowie den dazwischenliegenden Abständen entsteht ein Raster, auf dem Elemente durch Ziehen mit der Maus positioniert werden. Das Werkzeug übersetzt diese visuelle Anordnung in standardkonformen CSS- und HTML-Code, der direkt in eigene Webprojekte kopiert werden kann.

Die Erstellung des Grids erfolgt über präzise Eingabemasken und eine interaktive Vorschau. Sobald die Struktur aus Zeilen und Spalten steht, wird durch das Ziehen über die Zellen ein rechteckiger Bereich markiert. Beim Loslassen der Maus entsteht ein platziertes Kind-Element, das sich über die ausgewählten Spalten und Zeilen erstreckt. Jedes dieser gezeichneten Elemente erhält im generierten CSS eigene Regeln für die Positionierung und im HTML ein entsprechendes Struktur-Element.

Eingabewerte und Konfiguration des Rasters

Das Layout wird über eine Reihe von numerischen Werten und CSS-Maßeinheiten gesteuert:

• Spalten: Ein numerischer Wert zwischen 1 und 12, der die Anzahl der vertikalen Rasterlinien festlegt.
• Zeilen: Ein numerischer Wert zwischen 1 und 12 für die Anzahl der horizontalen Rasterlinien.
• Spaltenabstand: Ein Wert zwischen 0 und 48px, der den leeren Raum zwischen den Spalten definiert.
• Zeilenabstand: Ein Wert zwischen 0 und 48px, der den leeren Raum zwischen den Zeilen definiert.
• Spaltengrößen: Für jeden Spalten-Track lässt sich ein individueller CSS-Wert festlegen. Erlaubt sind alle gültigen CSS-Grid-Werte wie 1fr, 200px, auto, min-content oder komplexe Ausdrücke wie minmax(120px, 1fr).
• Zeilengrößen: Analog zu den Spalten kann jede Zeile mit Werten wie 1fr, 200px, auto, min-content oder minmax(120px, 1fr) präzise dimensioniert werden.
• Elementplatzierung: Die Zuweisung von Elementen erfolgt interaktiv durch das Ziehen der Maus über die gewünschten Zellen des Rasters.

Generierter Code und Ausgabe

Als Ergebnis liefert das Werkzeug zwei Code-Blöcke, die exakt aufeinander abgestimmt sind:

1. CSS: Der Code enthält die Definitionen für den Grid-Container (unter anderem display: grid, Spalten- und Zeilendefinitionen sowie Abstände) und die spezifischen Positionsangaben für jedes einzelne platzierte Element.
2. HTML: Ein Container-Element, das die Struktur vorgibt, gefüllt mit einzelnen div-Elementen für jedes auf dem Raster platzierte Kind-Element.

Verhaltensregeln und technische Besonderheiten

Bei der Arbeit mit dem Generator gelten feste Regeln für die Code-Erzeugung und die Benutzeroberfläche:

• Element-Limit: Das Werkzeug unterstützt maximal 16 platzierte Elemente gleichzeitig.
• Überlappungen: Elemente können auf denselben Rasterzellen platziert werden. Das Element, das zeitlich später gezeichnet wurde, liegt in der visuellen Hierarchie und im Code über dem zuvor gezeichneten Element.
• Löschen von Elementen: Jedes gezeichnete Element verfügt über ein "×"-Symbol. Ein Klick darauf entfernt das Element aus der Vorschau und dem Code. Die Funktion "Elemente löschen" leert den HTML-Container vollständig und setzt den Zähler auf 0 Elemente zurück. Die Schaltfläche "Element hinzufügen" generiert ein neues HTML-Element im Raster.
• Code-Optimierung durch repeat(): Wenn mehrere aufeinanderfolgende Spalten oder Zeilen dieselbe Größe aufweisen, fasst der Generator diese im CSS-Ausgabecode automatisch mithilfe der CSS-Funktion repeat() zusammen, um den Code kompakt zu halten.
• Zusammenfassung von Abständen: Wenn der Spaltenabstand und der Zeilenabstand identische Werte aufweisen, werden die CSS-Eigenschaften column-gap und row-gap im Ausgabecode zu einer einzigen gap-Eigenschaft zusammengeführt.
• Fehlerbehandlung bei Falscheingaben: Wird in ein Größenfeld ein ungültiger CSS-Wert eingetragen (beispielsweise not-a-grid-track), wird das Eingabefeld visuell als ungültig markiert. Um ein fehlerhaftes Layout im Browser zu verhindern, behält die CSS-Ausgabe in diesem Fall den letzten gültigen Wert bei.

Integrierte Layout-Vorlagen

Für einen schnellen Einstieg bietet das Werkzeug verschiedene Vorlagen, die typische Webdesign-Strukturen mit einem Klick laden:

• Seitenleiste: Ein klassisches Layout mit einer schmalen Spalte für die Navigation und einer breiteren Spalte für den Hauptinhalt.
• Header & Footer: Eine dreiteilige vertikale Struktur mit Kopfzeile, Hauptbereich und Fußzeile.
• Galerie: Ein gleichmäßiges Raster, das standardmäßig 3 Spalten, 2 Zeilen und 3 platzierte Elemente erzeugt.
• Dashboard: Eine komplexere Aufteilung, die sich für administrative Oberflächen mit verschiedenen Widget-Bereichen eignet.

Datenschutz und Verarbeitung

Die Erstellung des Grids erfolgt vollständig lokal. Alle Berechnungen, Code-Generierungen und Interaktionen werden direkt im Webbrowser ausgeführt. Es findet keine Übertragung der eingegebenen Werte, Dimensionen oder Layout-Strukturen an externe Server statt.

---

FAQ

Wie platziere ich Elemente auf dem Grid?

Klicken und ziehen Sie über die Zellen, um ein Rechteck aufzuziehen. Sobald Sie loslassen, wird es zu einem platzierten Kind-Element, das sich über diese Spalten und Zeilen erstreckt. Jedes gezeichnete Element erhält eine eigene grid-column- und grid-row-Regel im CSS sowie ein passendes div im HTML. Elemente können sich überlappen, wobei das später gezeichnete oben liegt. Nutzen Sie das × am Element, um es zu entfernen.

Können Spalten und Zeilen unterschiedliche Größen haben?

Ja. Jeder Track hat ein eigenes Größenfeld, in das Sie beliebige CSS-Grid-Werte eintragen können – z. B. 1fr, 200px, auto, min-content oder minmax(120px, 1fr). Tracks mit identischer Größe werden automatisch in repeat() zusammengefasst, um den Code kurz zu halten. Spalten- und Zeilenabstände werden separat definiert und zu einem einzigen gap-Wert zusammengefasst, wenn sie übereinstimmen.

Was mache ich mit dem generierten Code?

Kopieren Sie das CSS und das HTML nebeneinander. Das HTML liefert den Container mit einem div pro Element, und das CSS definiert das Grid und positioniert jedes Element. Fügen Sie beides in Ihr Projekt ein, um exakt das Layout zu erhalten, das Sie hier gezeichnet haben.