Tools · CSS · Grid-Spielwiese
Grid-Spielwiese
Erstelle ein CSS-Grid-Layout - Spurenzahl, Abstände, Ausrichtung sowie Platzierung je Element - mit Live-Vorschau, und kopiere den Code.
Läuft komplett im Browser. Es wird nichts hochgeladen.
Deine Datei ist bereit.
Versuch eine andere Datei, oder versuch es erneut.
So funktioniert es
Wähle eine Vorlage, oder starte mit dem Standard-3×3-Grid.
Passe die Anzahl der Spalten und Zeilen, die Abstände und die Ausrichtung an.
Wähle ein Element aus, um es mit eigenem Start und eigener Spanne zu platzieren, und kopiere dann den CSS-Code.
Häufige Fragen
Nein. Das Grid und der erzeugte CSS-Code werden vollständig in deinem Browser erstellt.
Eine eigene Platzierung über die festgelegte Spalten- oder Zeilenzahl hinaus erzeugt automatisch eine zusätzliche implizite Spur - das ist gültiges CSS, kein Fehler.
justify-items positioniert den Inhalt innerhalb jeder Zelle. justify-content positioniert die gesamte Spurmenge innerhalb des Containers - ein Unterschied ist nur sichtbar, wenn die Spuren den Container nicht vollständig ausfüllen.
Ja, und das ist korrekt. Die Spaltenachse eines Grids folgt der Seitenrichtung, sodass Spalte 1 unter RTL auf der physisch gegenüberliegenden Seite erscheint, ganz ohne zusätzlichen Code - dieses Tool zeigt echtes CSS-Grid-Verhalten, keine Annäherung von links nach rechts.
Kommentare