Wählen Sie auto-fit-Spuren oder eine feste Spaltenzahl und stellen Sie Mindestbreite, Abstand, Ausrichtung und Elementanzahl ein: die Vorschau ist ein echtes CSS-Grid und die Ausgabe enthält die vollständige Regel von grid-template-columns bis gap, align-items und justify-items.
Läuft lokal in deinem BrowserWählen Sie feste Spalten oder eine auto-fit-Spur, stellen Sie Mindestbreite, Abstand und Elementanzahl ein: die Vorschau ist ein echtes CSS-Grid und die Ausgabe zeigt genau die Regel zum Einfügen (display: grid, grid-template-columns, gap, align-items und justify-items).
Die Zahlen auf dieser Seite sind gemessen, nicht aus der Spezifikation übernommen. Der Standard ist auto-fit mit 180 px Minimum, 16 px Abstand und 8 Elementen; bei einem 1360 px Fenster ist die Vorschau 494 px breit und dasselbe Raster wurde zu 2 Spuren bei 180 px, 5 bei 80 px und 1 bei 600 px.
auto-fit schreibt repeat(auto-fit, minmax(min(100%, 180px), 1fr)) — der min(100%, …)-Schutz verhindert, dass eine Spur einen schmaleren Container überläuft — und der feste Modus schreibt repeat(4, minmax(0, 1fr)). Beide Exporte enthalten außerdem display: grid, gap, align-items und justify-items, also eine vollständige Regel.
Die Mindestbreite bestimmt die Spaltenzahl: gemessen in der 494 px breiten Vorschau ergaben 180 px zwei Spuren, 80 px fünf und 600 px eine einzige. Der Abstand gilt als ein Wert für Zeilen und Spalten.
Die vier Zahlenfelder haben harte Grenzen: Spalten 1-12, Mindestbreite 80-600 px, Abstand 0-96 px, Elemente 1-24. 20 Spalten zeichneten früher 12 Spuren, während im Feld weiter 20 stand; jetzt springt das Feld beim Bestätigen auf 12, und 9999 → 600 px, 200 → 96 px sowie 30 → 24 Elemente verhalten sich gleich.
Leere, nicht numerische und dezimale Eingaben werden ebenfalls in den Bereich gefaltet: 3.7 wird zu 4, -5 wird zu 1 und ein geleertes Feld fällt auf den kleinsten erlaubten Wert zurück. Während des Tippens folgt die Vorschau dem Wert, das Feld bleibt jedoch unberührt.
Er schreibt eine Container-Regel plus einen Block Beispiel-Elemente, mehr nicht: keine benannten Bereiche (grid-template-areas), keine Platzierung einzelner Elemente (span, row/column), keine auto-rows und kein dichtes Packen; die Klassennamen .grid / .grid__item sind Gerüst und für das eigene Markup umzubenennen.
Alles läuft in der Seite: während die Regler bedient und der Code kopiert wurden, hat der Browser keine einzige Anfrage gesendet. Dasselbe Skript bedient vier weitere Generatoren (bezier, clamp, blurhash, gradient), deren Seiten unverändert blieben; die Grid-Seite läuft bei 320, 390, 768 und 1360 px ohne horizontales Überlaufen.