Developer Tools
Design Tools
Web UtilitiesCSS Grid Playground
Erstellen Sie CSS Grid-Layouts visuell mit Echtzeit-Vorschau, Template-Area-Unterstützung und sofortiger CSS-Code-Ausgabe. Konfigurieren Sie Spalten, Zeilen, Abstände und Element-Positionierung interaktiv.
Presets
Container-Eigenschaften
Element-Eigenschaften
Live-Vorschau
Container-CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 80px);
gap: 8px;
}Element-CSS
.grid-item-1 {
}
.grid-item-2 {
}
.grid-item-3 {
}
.grid-item-4 {
}
.grid-item-5 {
}Verwandte Tools
Über den CSS Grid Playground
So funktioniert es
- Container-Eigenschaften konfigurieren: grid-template-columns, grid-template-rows, gap, justify-items, align-items, justify-content und align-content
- Bis zu 8 Grid-Elemente hinzufügen und jedes mit grid-column-start/end und grid-row-start/end positionieren
- Span-Notation (z.B. span 2) oder explizite Liniennummern in den Template-Feldern verwenden
- Layout in Echtzeit vorschauen — auf ein beliebiges Element in der Vorschau klicken, um es im Editor auszuwählen
- Presets für gängige Layouts wie Holy Grail, Dashboard oder Card Grid anwenden und dann anpassen
- Generierten CSS-Code für Container und Elemente direkt in Ihr Projekt kopieren
Häufige Anwendungsfälle
- CSS Grid-Eigenschaften interaktiv mit sofortigem visuellem Feedback lernen
- Layouts prototypisieren: Header, Seitenleisten, Dashboards, Kartengrids
- Grid-Platzierungsprobleme durch visuelle Anpassung von Liniennummern debuggen
- Basis-Grid-CSS für gängige Layouts generieren
- CSS Grid Schülern und Kollegen beibringen
Häufig gestellte Fragen
Was ist der CSS Grid Playground?
Der CSS Grid Playground ist ein interaktives Browser-Tool, mit dem Sie alle CSS Grid Container- und Element-Eigenschaften visuell konfigurieren können. Änderungen erscheinen sofort in der Live-Vorschau, und fertiger CSS-Code wird automatisch generiert, damit Sie ihn in Ihr Projekt kopieren können.
Welche Container-Eigenschaften kann ich konfigurieren?
Sie können grid-template-columns, grid-template-rows, gap (oder column-gap und row-gap separat), justify-items, align-items, justify-content und align-content konfigurieren. Alle Werte unterstützen jede gültige CSS-Syntax, einschließlich fr-Einheiten, repeat(), minmax() und auto.
Wie positioniere ich ein Element auf bestimmten Grid-Linien?
Wählen Sie das Element über seinen nummerierten Tab im Element-Eigenschaften-Panel aus und setzen Sie dann grid-column-start, grid-column-end, grid-row-start und grid-row-end. Geben Sie eine Zahl für eine explizite Grid-Linie ein oder lassen Sie 'auto' für automatische Positionierung.
Was sind Presets und wie verwende ich sie?
Presets sind vordefinierte Grid-Konfigurationen für gängige Layouts: 'Holy Grail' erstellt ein klassisches Header/Nav/Main/Sidebar/Footer-Layout, 'Sidebar + Main' baut ein zweispaltiges Layout mit Seitenleiste, '3-Col Masonry' illustriert überspannende Elemente, 'Dashboard' zeigt ein vierspaltiges Dashboard, 'Blog Layout' konfiguriert einen typischen Artikel mit Seitenleiste, und 'Card Grid' erstellt ein gleichmäßiges Drei-Spalten-Kartengitter.
Welche Werte akzeptiert grid-template-columns?
grid-template-columns akzeptiert jede gültige CSS-Track-Liste: feste Längen wie '200px 1fr', die repeat()-Funktion wie 'repeat(3, 1fr)', minmax() wie 'repeat(3, minmax(100px, 1fr))', auto-fill oder auto-fit, oder benannte Linien wie '[start] 1fr [end]'.
Was ist der Unterschied zwischen fr-Einheiten und Pixeln?
Die fr-Einheit (fraktional) stellt einen Bruchteil des verfügbaren Platzes im Grid-Container dar. '1fr 1fr 1fr' teilt den Platz gleichmäßig in drei Spalten. '2fr 1fr' gibt der ersten Spalte doppelt so viel Platz. Pixel-Werte sind unabhängig von der Container-Größe fest.
Was macht justify-items im Vergleich zu justify-content?
justify-items steuert, wie Elemente innerhalb ihrer Grid-Zellen entlang der Inline-Achse ausgerichtet werden. justify-content steuert, wie das gesamte Grid im Container ausgerichtet wird, wenn zusätzlicher Platz vorhanden ist. Ebenso richtet align-items Elemente in ihren Zellen auf der Block-Achse aus.
Was sind justify-self und align-self für Grid-Elemente?
justify-self überschreibt justify-items für ein einzelnes Grid-Element und steuert dessen Inline-Ausrichtung in seiner Zelle. align-self überschreibt align-items für ein einzelnes Element und steuert dessen Block-Ausrichtung. Beide akzeptieren: auto, start, end, center und stretch.
Wie lasse ich ein Element über mehrere Spalten oder Zeilen spannen?
Setzen Sie grid-column-start und grid-column-end (oder grid-row-start und grid-row-end), um eine Überspannung zu erstellen. Um beispielsweise von Spalte 1 bis Spalte 3 zu spannen, setzen Sie start=1 und end=3. Sie können auch start als 'auto' lassen und end auf 'span 2' setzen, um zwei Tracks zu überspannen.
Wie viele Grid-Elemente kann ich hinzufügen?
Sie können bis zu 8 Grid-Elemente hinzufügen. Klicken Sie auf die Schaltfläche '+ Element hinzufügen', um weitere hinzuzufügen. Jedes Element ist farblich kodiert, damit Sie es im Einstellungsbereich und in der Live-Vorschau identifizieren können.
Kann ich benutzerdefinierte Gap-Größen für Spalten und Zeilen verwenden?
Ja. Standardmäßig gilt ein einzelner Gap-Wert für beide Spalten- und Zeilen-Rinnen. Aktivieren Sie die Option 'Benutzerdefinierte Spalten-/Zeilen-Gaps verwenden', um column-gap und row-gap unabhängig mit separaten Schiebereglern festzulegen.
Wie kopiere ich das generierte CSS?
Es stehen zwei Kopier-Schaltflächen zur Verfügung: eine für den Container-CSS-Block (.grid-container) und eine für das gesamte CSS einschließlich der Element-Regeln. Klicken Sie auf eine beliebige Schaltfläche 'CSS kopieren', um den Code in Ihre Zwischenablage zu kopieren.