CSS-Grid-Spielwiese

Alle Werkzeuge

Stelle CSS-Grid-Vorlagen, Abstände und Platzierung visuell zusammen und kopiere das Layout-CSS.

Vorschau

Klicke auf ein nummeriertes Element im Raster, um es auszuwählen und neu zu positionieren.

grid-template-columns —
grid-template-rows —
Generiertes CSS
—
—
Spalten
Zeilen
Abstände
16px
16px
Ausrichtung
Rasterelemente
Element 1
Voreinstellungen

Über CSS-Grid-Spielwiese

Der CSS-Grid-Playground stellt echte Grid-Layouts visuell zusammen. Fügen Sie Spalten- und Zeilenspuren hinzu oder entfernen Sie sie, um grid-template-columns und grid-template-rows zu formen, legen Sie Spalten- und Zeilenabstände fest und feinjustieren Sie alle vier Ausrichtungseigenschaften — justify-items, align-items, justify-content und align-content —, während die Vorschau jede Änderung sofort widerspiegelt.

Bei der Elementplatzierung zeigt sich die Stärke von Grids: Fügen Sie Elemente hinzu, klicken Sie eines in der Vorschau an und positionieren Sie es mit Spaltenstart, Spaltenspanne, Zeilenstart und Zeilenspanne. So entstehen Seitenleisten, Header und über mehrere Spuren reichende Feature-Zellen — die Technik hinter fast jedem realen Grid-Layout.

Drei Vorlagen — Holy Grail, Dashboard und Galerie — laden klassische Seitenstrukturen, die Sie zerlegen und anpassen können. Wenn das Layout stimmt, kopieren Sie das generierte CSS mit den vollständigen Grid-Container-Regeln und der Platzierung jedes Elements.

So verwenden Sie CSS-Grid-Spielwiese

  1. Fügen Sie Spalten- und Zeilenspuren hinzu oder entfernen Sie sie, um die Grid-Vorlage zu definieren.
  2. Legen Sie den Spaltenabstand und den Zeilenabstand fest.
  3. Passen Sie die Ausrichtungssteuerungen an: justify-items, align-items, justify-content und align-content.
  4. Fügen Sie Elemente hinzu, klicken Sie eines in der Vorschau an und legen Sie dessen Spalten-/Zeilenstart und -spanne fest, um es zu platzieren.
  5. Laden Sie die Vorlage Holy Grail, Dashboard oder Galerie, um ein klassisches Layout zu studieren.
  6. Kopieren Sie das generierte CSS in Ihr Stylesheet.

Häufig gestellte Fragen

justify-items richtet jedes Element innerhalb seiner eigenen Grid-Zelle aus; justify-content richtet das gesamte Grid innerhalb des Containers aus, wenn die Spuren ihn nicht ausfüllen. Dieselbe Unterscheidung gilt vertikal für align-items gegenüber align-content.

Wählen Sie das Element aus und erhöhen Sie seine Spaltenspanne — die CSS-Ausgabe verwendet grid-column mit einem span-Wert. Kombiniert mit einer Zeilenspanne können Sie Header-Leisten, Seitenleisten und große Feature-Zellen innerhalb desselben Grids erstellen.

Das klassische Seitengerüst: vollbreiter Header und Footer mit drei Spalten dazwischen — Navigation, Hauptinhalt und eine Randspalte. Es war mit Floats notorisch umständlich; die Vorlage zeigt, wie einige Grid-Platzierungen das elegant lösen.

Grid glänzt bei zweidimensionalen Layouts, bei denen Zeilen und Spalten ausgerichtet sein müssen — Seitengerüste, Dashboards, Galerien. Flexbox eignet sich am besten für eindimensionale Abläufe wie Werkzeugleisten und Menüs. Sie lassen sich gut kombinieren: Grid für die Seite, Flex innerhalb der Komponenten.

Ja, er ist kostenlos und browserbasiert — experimentieren Sie so lange Sie möchten, nichts, was Sie erstellen, verlässt Ihren Rechner.
Teilen
Verwandte Tools
E-Mail-Signatur-Editor Erstellen Sie eine professionelle HTML-E-Mail-Signatur aus 30 Vorlagen, passen Sie sie an und speichern Sie sie. Kostenlos
Icon zu PNG Bootstrap Icons, Font Awesome und mehr in benutzerdefinierte PNG-Bilder konvertieren — kostenlos, im Browser. Kostenlos
App-Icon-Generator Erzeugen Sie ein komplettes, veröffentlichungsfertiges App-Icon-Set für App Store und Google Play — hochwertige Verlaufs-, Mesh- und Muster-Hintergründe, aus Ihrem Logo erstellt. Kostenlos
Favicon-Generator Erstellen Sie ein komplettes Favicon-Paket aus einem Logo, einem Schriftsymbol oder einem Monogramm — favicon.ico, moderne PNGs, Apple-Touch-Icon, PWA-Icons, Web-Manifest und HTML-Snippet. Kostenlos
CSS Box-Shadow-Generator Erstellen Sie mehrschichtige CSS Box-Shadows mit Live-Schiebereglern für Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und Einfügung – Vorschau auf einem echten Element und fertiges CSS sofort kopieren. Kostenlos
CSS-Border-Radius-Generator Gestalte CSS border-radius visuell mit Live-Vorschau und kopiere produktionsreifen Code. Kostenlos
Beliebte Suchen
css grid generator css grid spielwiese grid-template-columns generator css grid layout generator grid-template-areas builder css grid abstand tool css grid visualisierer
Brauchen Sie Hilfe?
Ein Problem mit diesem Tool gefunden? Sagen Sie es unserem Team.
Problem melden

Füge dieses kostenlose Tool zu deiner eigenen Website hinzu — kopiere den Code unten und füge ihn ein.