CSS-Grid-Generator

Grid-Beispiel erstellen

1. Lege Beispielgröße, Tracks, Fluss, Richtung, Abstände und Ausrichtung fest.
2. Bearbeite Text und Platzierung, ändere die Quellreihenfolge oder verwende benannte Bereiche. Korrigiere unvollständige oder widersprüchliche Angaben.
3. Prüfe Vorschau und Code, kopiere CSS oder HTML oder lade dasselbe vollständige Dokument wie in der Vorschau herunter.

Die Regeln verstehen

Explizite Tracks stammen aus dem Template; automatische oder außerhalb liegende Platzierungen können implizite Tracks nach eigenen Mustern erzeugen.

fr verteilt den verbleibenden Platz nach dem Grid-Algorithmus, nicht als Prozentsatz der Außenbox. 1fr hat ein automatisches Minimum; minmax(0px, 1fr) ändert es. Das Elementminimum ist eine getrennte Wahl.

Linien, order und dense können die visuelle Anordnung ändern, aber nicht die Lese- oder Fokusreihenfolge im HTML. Verschieben ändert dagegen die Quellreihenfolge.

Spalten folgen der Inline-Achse, Zeilen der Blockachse; bei vertikaler Schrift ändern sich die physischen Richtungen. Einpassen erzeugt keine Breakpoints.

Beispiele

Bei 640px border-box-Breite, je 1px Rand und 16px Innenabstand bleiben 606px Inhaltsbreite. Nach zwei Abständen von 12px und einem Track von 120px bleiben 462px: Unter einfachen Annahmen erhalten 1fr und 2fr 154px und 308px. Tatsächliche Größen können abweichen.

Bei drei expliziten Spalten bezeichnet -1 die letzte explizite Linie, auch wenn implizite Spalten entstehen. Die negative Zahl bleibt im CSS erhalten.

Bei zwei Spalten kann header die erste Zeile, nav und main die zweite und footer die dritte belegen. Jeder Bereich ist rechteckig; leere Zellen werden als Punkt dargestellt.

Grenzen des Editors

Pro Achse sind 1–12 explizite Tracks und 1–4 implizite Größen sowie 1–12 Elemente möglich. Unterstützt werden minmax, Linien, Spannen und benannte Rechtecke, kein beliebiges CSS.

Es gibt kein repeat, auto-fit, auto-fill, subgrid, masonry, verschachteltes Grid oder Breakpoint-Generator. Flexible Tracks garantieren keine responsive Website.

Prozent-Tracks und Abstände können überlaufen. Inhalt, Schrift, automatische Mindestgrößen, Ränder und Scrollleisten beeinflussen das Ergebnis.

Der Linienmodus erlaubt Überlappungen, lehnt aber gleiche oder umgekehrte definierte Enden ab. Benannte Bereiche müssen eindeutig, innerhalb des expliziten Grids und überlappungsfrei sein.

Vorschau und Download verwenden dasselbe Dokument mit zurückgesetzten Seitenrändern. Auf anderen Websites können umgebende Stile und Browsermetriken das Fragment beeinflussen.

Lokales Beispiel

Text wird maskiert und Code lokal erzeugt, ohne Upload oder Speicherung in URL und Verlauf. Die Vorschau nutzt ein leeres Sandbox-Attribut und eine restriktive Ressourcenrichtlinie; dies zertifiziert keine anderen Dienste oder spätere Änderungen.