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 mit dem Modus-Umschalter Flex oder Grid und lege dann die Container-Eigenschaften mit einfachen Dropdowns und Zahlenfeldern fest: Im Flex-Modus steuerst du flex-direction, flex-wrap, justify-content und align-items; im Grid-Modus gibst du an, wie viele Spalten und Zeilen (gerendert als repeat(n, 1fr)) sowie justify-items und align-items. Ein gap-Wert und eine Elementanzahl gelten für beide. Eine Live-Vorschau aus nummerierten Kacheln zeigt genau, wie sich deine Ausrichtung und dein Abstand verhalten, und die vollständige .container-CSS-Regel wird zum Kopieren erzeugt. Greif darauf zurück, wann immer du sehen willst, wie eine Flex- oder Grid-Einstellung tatsächlich aussieht, bevor du sie in dein Projekt einfügst.

So verwendest du CSS-Flexbox- & Grid-Spielplatz

1. Wähle mit dem Modus-Umschalter Flex oder Grid, um zu bestimmen, welches Layoutmodell du aufbaust.
2. Lege im Flex-Modus flex-direction, flex-wrap, justify-content und align-items über die Dropdowns fest.
3. Lege im Grid-Modus die Anzahl der Spalten und Zeilen sowie justify-items und align-items fest.
4. Öffne die Einstellungen, um den gap (Abstand in px) und die Anzahl der in der Vorschau gezeigten Elemente zu ändern.
5. Beobachte, wie sich die Live-Kachelvorschau bei jeder Eigenschaftsänderung neu anordnet.
6. Kopiere die generierte .container-CSS-Regel und füge sie in dein Stylesheet ein.

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 · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

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

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

Häufig gestellte Fragen

Was ist hier der Unterschied zwischen Flexbox und Grid?

Der Flex-Modus ordnet Elemente entlang einer einzigen Achse an und bietet flex-direction, flex-wrap, justify-content und align-items. Der Grid-Modus ordnet Elemente in einem zweidimensionalen Raster mit grid-template-columns und grid-template-rows (geschrieben als repeat(n, 1fr)) zusammen mit justify-items und align-items an. Wechsle mit dem Umschalter den Modus, um zu vergleichen, wie jedes Modell dieselbe Ausrichtung handhabt.

Was bewirkt der gap-Wert?

gap legt über die CSS-Eigenschaft gap den Abstand in Pixeln zwischen allen Elementen in Flex- und Grid-Layouts fest. Erhöhe ihn, um die Kacheln auseinanderzuziehen, oder setze ihn auf 0 für ein bündiges Layout; Vorschau und generiertes CSS werden beide sofort aktualisiert.

Warum werden justify-content und align-items im Grid anders geschrieben?

Grid verwendet für justify-items und align-items die Schlüsselwörter start, end, center und stretch, während Flex flex-start und flex-end nutzt. Das Tool gibt für den jeweiligen Modus die korrekten Schlüsselwörter aus, sodass das kopierte CSS immer gültig ist.

Kann ich ändern, wie viele Elemente angezeigt werden?

Ja. Öffne die Einstellungen und ändere die Elementanzahl, um die nummerierten Vorschaukacheln hinzuzufügen oder zu entfernen (bis zu 24). Das betrifft nur die Bildschirmdemonstration; das generierte CSS beschreibt den Container, nicht die Elemente selbst.

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.