Registrieren Registrieren
CSS-Grid-Playground

CSS-Grid-Playground

Baue CSS-Grid-Layouts mit Echtzeit-Vorschau – Baukasten, manuelle Eingabe, Presets, sofortiges Kopieren

Farbverlauf-Generator Erstelle lineare, radiale und konische Farbverläufe mit Live-Vorschau.
Mesh-Gradient-Generator Fließende WebGL-Mesh-Gradients – Export als CSS oder Bild.
clamp()-Generator Fluide Typografie und Abstände mit CSS clamp().
Border-Radius-Generator Visueller border-radius-Editor – von einfachen Ecken bis zu ausgefallenen Blob-Formen.
Box-Shadow-Generator Mehrschichtige CSS-Schatten mit Live-Vorschau und Presets.
Clip-Path-Generator Gestalte clip-path-Formen: Presets, Polygone, verschiebbare Punkte.
Neumorphismus-Generator Soft-UI-Schatten: flach, konkav, konvex und gedrückt.
Liquid-Glass-Generator Oberflächen im Stil von Liquid Glass: Milchglas, Verzerrung, chromatische Linse.
SCSS-Mixins Bibliothek mit fertigen SCSS-Mixins.
Einstellungen
Live-Vorschau

—

12 Elemente

Weitere Tools: CSS

Farbverlauf-Generator
Erstelle lineare, radiale und konische Farbverläufe mit Live-Vorschau.
Mesh-Gradient-Generator
Fließende WebGL-Mesh-Gradients – Export als CSS oder Bild.
clamp()-Generator
Fluide Typografie und Abstände mit CSS clamp().

So funktioniert der CSS-Grid-Playground

Baue CSS-Grid-Layouts visuell oder direkt im Code. Starte mit Presets, passe alles in Echtzeit an und kopiere produktionsreifes CSS.

Visueller Baukasten

Lege Zeilen, Spalten und Abstände visuell fest. Ziehe die Regler oder gib exakte Werte ein – das Raster aktualisiert sich in Echtzeit. Für den Einstieg brauchst du keine CSS-Kenntnisse.

Manuelle CSS-Eingabe

Wechsle in den manuellen Modus und schreibe grid-template-columns, grid-template-rows und gap von Hand. Die Vorschau zeigt deinen Code schon während der Eingabe.

Preset-Bibliothek

Starte mit gängigen Layout-Mustern – Holy Grail, Sidebar, Dashboard, Kartenraster und mehr. Jedes Preset erzeugt bearbeitbaren Code, den du anpassen kannst.

CSS kopieren

Kopiere den erzeugten CSS-Grid-Code mit einem Klick. Die Ausgabe ist sauber, produktionsreif und nutzt moderne Grid-Syntax, die alle gängigen Browser unterstützen.

Häufig gestellte Fragen

CSS Grid ist ein zweidimensionales Layout-System, das direkt in CSS eingebaut ist. Damit legst du Zeilen und Spalten fest und platzierst Elemente in Zellen – ohne Floats oder Positionierungs-Hacks. Grid wird von allen modernen Browsern unterstützt und ist der Standard für komplexe Seitenlayouts.

Nimm Grid für zweidimensionale Layouts, bei denen du Zeilen und Spalten gleichzeitig steuern musst – Dashboards, Kartenraster und Seitenvorlagen. Nimm Flexbox für eindimensionale Ausrichtung – Navigationsleisten, Button-Gruppen und Inline-Elemente.

Ja. Ein Grid-Element kann selbst ein Grid-Container sein. Das ist bei Dashboards üblich: Die ganze Seite ist ein Grid, und einzelne Panels enthalten eigene Sub-Grids für ihr internes Layout.

Die Einheit fr steht für „fraction“ – einen Anteil am verfügbaren Platz. 1fr 2fr bedeutet, dass die zweite Spalte doppelt so viel Platz bekommt wie die erste. Das ist die flexibelste Art, Grid-Tracks zu dimensionieren, und erspart manuelle Prozentrechnungen.