CSS-Flexbox- & Grid-Spielplatz

Was ist CSS-Flexbox- & Grid-Spielplatz?

Der CSS-Flexbox- & Grid-Spielplatz ist eine kostenlose visuelle Sandbox zum Lernen und Prototyping der beiden wichtigsten CSS-Layoutmodelle, gedacht für Frontend-Entwickler, Lernende und Designer. Wähle Flex oder Grid, lege die Container-Eigenschaften fest und öffne die Einstellungen, um einzelne Kinder zu stylen: order, flex-grow, flex-shrink, flex-basis und align-self im Flex-Modus, oder Spalten-/Zeilen-Span und align-self im Grid-Modus. Der Grid-Modus bietet zudem eigene Track-Größen — gib einen beliebigen grid-template-columns/rows-Wert wie 200px 1fr oder repeat(auto-fit, minmax(120px, 1fr)) ein — und einen visuellen grid-template-areas-Editor, in dem du jede Zelle benennst, was auch benannte Rasterlinien erzeugt. Eine Live-Vorschau nummerierter Kacheln spiegelt jede Änderung, und du kannst nur die .container-Regel oder den Container samt Pro-Element-CSS exportieren.

So verwendest du CSS-Flexbox- & Grid-Spielplatz

1. Wähle mit dem Modus-Umschalter Flex oder Grid, um zu bestimmen, welches Layoutmodell du baust.
2. Lege die Container-Eigenschaften fest — flex-direction/wrap und justify/align, oder die Anzahl der Spalten und Zeilen mit justify-items/align-items.
3. Öffne die Einstellungen, um gap und Elementanzahl zu ändern und jedes Kind zu stylen (order, flex-grow/shrink/basis, align-self oder Spalten-/Zeilen-Span).
4. Wechsle im Grid die Track-Größe auf Benutzerdefiniert, um eigene grid-template-columns/rows einzugeben — px, fr, minmax() oder repeat(auto-fit/auto-fill, …).
5. Schalte den grid-template-areas-Editor ein und benenne jede Zelle, um Elemente nach Bereich zu platzieren.
6. Wähle, ob nur das Container-CSS oder Container plus Pro-Element-CSS exportiert wird, und kopiere das Ergebnis.

Beispiele

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

.container > :nth-child(2) {
  flex-grow: 1;
}

Häufig gestellte Fragen

Was ist hier der Unterschied zwischen Flexbox und Grid?

Der Flex-Modus ordnet Elemente entlang einer Achse an und bietet flex-direction, flex-wrap, justify-content und align-items. Der Grid-Modus ordnet sie zweidimensional mit grid-template-columns und grid-template-rows plus justify-items und align-items an. Wechsle mit dem Umschalter den Modus, um zu vergleichen, wie jeder dieselbe Ausrichtung handhabt.

Wie style ich einzelne Elemente?

Öffne die Einstellungen und setze mit den Pro-Element-Steuerungen order, flex-grow, flex-shrink, flex-basis und align-self (Flex) oder Spalten-/Zeilen-Span und align-self (Grid) für jedes Kind. Stelle Export auf 'Container + Elemente', und das Tool fügt für jedes angepasste Element eine .container > :nth-child(n)-Regel hinzu.

Kann ich eigene Track-Größen wie auto-fit oder minmax() verwenden?

Ja. Wechsle im Grid-Modus die Track-Größe auf Benutzerdefiniert und gib einen gültigen grid-template-columns/rows-Wert ein — Pixel, fr-Einheiten, minmax() oder repeat(auto-fit/auto-fill, minmax(120px, 1fr)) für responsive Spalten. Vorschau und generiertes CSS aktualisieren sich beim Tippen.

Was macht der grid-template-areas-Editor?

Schalte ihn im Grid-Modus ein und benenne jede Zelle des Rasters; das Tool baut eine grid-template-areas-Deklaration, und leere Zellen werden zu einem Punkt. Benannte Bereiche erzeugen auch benannte Rasterlinien, und du kannst ein Kind in einen Bereich setzen, indem du dessen Namen im grid-area-Feld des Elements einträgst.

Werden meine Daten irgendwohin hochgeladen?

Nein. Der Spielplatz läuft vollständig mit JavaScript in deinem Browser, sodass deine Einstellungen und das generierte CSS niemals an einen Server gesendet werden. Er arbeitet privat und sogar offline, sobald die Seite geladen ist.