Visueller CSS Grid Generator
Der CSS Grid Generator wandelt visuelle Rasterzeichnungen direkt in sauberen CSS- und HTML-Code um. Über Schieberegler legen Sie Spalten, Zeilen und Abstände fest und zeichnen benannte Bereiche per Mausbewegung. Das Werkzeug läuft vollständig lokal in Ihrem Browser ohne Registrierung oder Server-Uploads.
CSS Grid Generator online bedienen
Die Erstellung eines Layouts erfolgt direkt auf der visuellen Arbeitsfläche in wenigen Schritten.
- Stellen Sie über die Schieberegler Spalten und Zeilen (jeweils 1 bis 24) sowie den Abstand (0 bis 128 Pixel) ein.
- Klicken Sie in eine Zelle des Rasters und ziehen Sie den Mauszeiger in die gegenüberliegende Ecke des gewünschten Bereichs.
- Benennen Sie den erstellten Bereich in der Liste Bereiche um oder löschen Sie ihn über das Papierkorb-Symbol.
- Klicken Sie auf den Block CSS oder HTML beziehungsweise auf Kopieren, um den fertigen Quellcode in die Zwischenablage zu übernehmen.
Grid Template Areas Generator für benannte Bereiche
Jeder gezeichnete Bereich erhält automatisch eine Bezeichnung wie area-1 oder area-2. Im Feld Bereiche können Sie eigene Namen wie header, sidebar oder main vergeben. Gültige Bereichsnamen bestehen aus Kleinbuchstaben, Ziffern, Bindestrichen sowie Unterstrichen und beginnen stets mit einem Buchstaben.
Im erzeugten Quellcode wird die Anordnung zeilenweise in grid-template-areas ausgegeben. Unbelegte Zellen werden mit einem Punkt dargestellt. Für jeden Bereich erzeugt der Generator eine Regel mit grid-area und ein passendes Kind-Element im HTML-Code.
Bereiche müssen rechteckig sein und dürfen sich nicht überlappen. Wenn eine Zeichnung einen bestehenden Bereich berührt, färbt sich die Auswahl rot und der Bereich wird nicht angelegt.
Spurgrößen anpassen und CSS Grid erstellen
Standardmäßig verteilen sich alle Spuren gleichmäßig mit der Einheit 1fr, im Code dargestellt als repeat(3, 1fr). Über das Menü Erweiterte Größen lässt sich jede Spalte und Zeile individuell anpassen.
Gültige Werte für die Spurgrößen sind unter anderem 1fr, 2fr, 240px, 25%, auto, min-content, max-content, minmax(100px, 1fr) oder fit-content(300px). Bei einer ungültigen CSS-Eingabe färbt sich das Eingabefeld rot und die Code-Ausgabe greift für diese Spur auf 1fr zurück.
Layouts mit dem CSS Grid Generator responsive gestalten
Der generierte Quellcode besteht aus reinen CSS- und HTML-Strukturen ohne externe Bibliotheken. Für anpassungsfähige Bildschirmlayouts empfiehlt sich die Verwendung flexibler Einheiten wie 1fr und minmax() anstelle fester Pixelwerte.
In einer Media Query kann grid-template-areas überschrieben werden, um benannte Bereiche auf schmalen Bildschirmen untereinander in einer einzigen Spalte anzuordnen. Die Zuordnung der Elemente über grid-area bleibt dabei im CSS unverändert.
Häufig gestellte Fragen
Was ist ein CSS-Grid-Generator?
Ein CSS-Grid-Generator ist ein visuelles Werkzeug, das aus einer Rasterzeichnung im Browser sauberen CSS-Grid- und HTML-Code erzeugt. Sie legen Spalten, Zeilen und Abstände fest und teilen Felder benannten Bereichen zu. Das Werkzeug generiert daraus automatisch die passenden Regeln wie display: grid und grid-template-areas.
Wie verwende ich grid-template-areas?
Über grid-template-areas definieren Sie das Layout zeilenweise durch benannte Bereiche in Anführungszeichen, wobei Punkte für leere Felder stehen. Die untergeordneten Elemente werden diesen Bereichen anschließend mit der Eigenschaft grid-area zugewiesen. Im Generator zeichnen Sie die Bereiche visuell auf der Fläche, woraufhin der Code automatisch erstellt wird.
Was bedeutet die fr-Einheit bei CSS-Grid?
Die Einheit fr steht für einen Bruchteil des verbleibenden freien Platzes im Raster nach Abzug fester Größen und Abstände. Bei einer Kombination aus 1fr und 2fr erhält die zweite Spur doppelt so viel freien Platz wie die erste. Standardmäßig erzeugt das Werkzeug gleichmäßige Spuren mit repeat(3, 1fr).
Was ist minmax() bei CSS-Grid?
Die Funktion minmax(min, max) definiert einen Größenbereich für Spuren, der nie kleiner als der Minimalwert und nie größer als der Maximalwert wird. Ein Wert wie minmax(100px, 1fr) sorgt dafür, dass eine Spalte mindestens 100 Pixel breit ist und sich bei verfügbarem Platz weiter ausdehnt. Sie können diesen Ausdruck im Feld Erweiterte Größen für jede Spur eintragen.
Wie füge ich einen Abstand (gap) zwischen Zeilen und Spalten ein?
Der Abstand zwischen Spuren wird über die Eigenschaft gap auf dem Elternelement gesteuert. Über den Regler Abstand lässt sich dieser Wert stufenlos von 0 bis 128 Pixel einstellen. Im eigenen Code können Sie bei Bedarf mit row-gap und column-gap getrennte Werte für Zeilen und Spalten festlegen.
Was ist der Unterschied zwischen CSS Grid und Flexbox?
CSS Grid ist ein zweidimensionales Layout-System für Spalten und Zeilen gleichzeitig, während Flexbox in der Regel eindimensional entlang einer einzelnen Achse arbeitet. Über benannte Bereiche in CSS Grid lassen sich komplexe Seitenstrukturen übersichtlich anordnen. Für einfache Reihen oder einzelne Komponenten bleibt Flexbox eine sinnvolle Ergänzung.
Werden meine Eingaben auf einen Server hochgeladen?
Nein, das Werkzeug läuft vollständig lokal in Ihrem Webbrowser. Es werden keine Daten auf externe Server übertragen und es ist keine Registrierung erforderlich. Der Quellcode wird in Echtzeit direkt aus den visuellen Einstellungen berechnet.
Empfohlen
-
Web-Design-Skizzenbuch (Punktraster)Layout erst aufs Papier skizzieren, dann hier ziehen
-
CSS: The Definitive Guide (Meyer & Weyl)Das Nachschlagewerk zu jeder Grid-Eigenschaft in deinem Code
-
15,6-Zoll Portabler Monitor (USB-C)Vorschau auf dem zweiten Bildschirm, während du am Grid feilst
Hilft, die Tools kostenlos zu halten. ✨
Symbolbilder. Als Amazon-Partner verdiene ich an qualifizierten Verkäufen.
