Grid-Spielwiese
Erstelle ein CSS-Grid-Layout - Spurenzahl, Abstände, Ausrichtung sowie Platzierung je Element - mit Live-Vorschau, und kopiere den Code.
Füge eine Datei hinzu und starte das Tool.
Deine Datei ist bereit.
Versuch eine andere Datei, oder versuch es erneut.
Einstellungen
Passe die Einstellungen unten an. Das Ergebnis aktualisiert sich dabei.
Läuft komplett im Browser. Es wird nichts hochgeladen.
Läuft komplett im Browser. Nichts wird je auf einen Server hochgeladen.
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.
Anleitungen
Ein genauerer Blick auf einzelne Probleme, die dieses Tool löst.
Why CSS Grid Draws the Layout Before the Content Arrives
Most CSS layout starts with the content and lets the container follow. Grid turns that around: the parent declares rows and columns first, and items are placed onto its lines. That is why grid feels strange at first and why it holds alignment so well.
Anleitung lesenHow to Make a Grid Item Span Two Columns
grid-column: 1 / span 2 makes an item cover two columns. Where you put the start line, whether you also pin the row, and what happens to the items after it are the parts that decide whether the rest of the grid still looks right.
Anleitung lesenThe Holy Grail Layout With CSS Grid, and What to Change After
Header, footer, a main column between two sidebars: grid does the holy grail layout in a few lines. The first version has equal rows and equal columns, though, and that is rarely what a real page wants. Here is the whole path from preset to page.
Anleitung lesen
Kommentare