CSS Grid Generator – Visuelles Rasterlayout online

Columns:

Rows:

Gap:

CSS

Share X / Twitter Facebook LinkedIn WhatsApp

So verwenden Sie CSS-Rastergenerator

Spalten und Zeilen festlegen – Anzahl und Größe (fr für flexibel, px für fest).
Passen Sie die Lücke an – den integrierten Rasterabstand zwischen allen Spuren.
Vorschau der Struktur – Elemente füllen Zellen in Quellreihenfolge.
Kopieren Sie das Container-CSS – und fügen Sie Spannenregeln pro Element für Zellen hinzu, die gedehnt werden sollen.

Was ist CSS-Rastergenerator?

Ein CSS-Grid-Generator erstellt zweidimensionale Layouts visuell: Wählen Sie die Anzahl der Spalten und Zeilen, passen Sie deren Größe an (die fr-Einheit, feste Pixel oder Mischungen), legen Sie den Abstand fest, zeigen Sie eine Vorschau des Ergebnisses an und kopieren Sie das display: grid; Grid-Template-Columns: … CSS.

Grid ist das CSS-System für Layouts, die in beiden Dimensionen ausgerichtet sind – Seitengerüste, Dashboards, Bildergalerien, Formularlayouts. Seine Syntax ist kompakt, aber abstrakt (grid-template-columns: 250px 1fr 1fr beschreibt eine Seitenleiste plus zwei Spalten in fünf Token); Der Generator macht die Abstraktion sichtbar, bevor Sie sie in ein Stylesheet übernehmen.

Über den CSS-Rastergenerator

Legen Sie Ihre Spalten und Zeilen fest, passen Sie die Größe der Spuren an, passen Sie die Lücke an und kopieren Sie das generierte CSS für den Container.

Flüssige und schnelle Größenanpassung der Spuren: 1fr 1fr 1fr besteht aus drei gleichen flexiblen Spalten; 250px 1fr ist die klassische Shell mit festem Seitenleisten-Fluid-Inhalt; repeat(3, 1fr) kürzt gleiche Titel ab; und das Kronjuwel repeat(auto-fit, minmax(250px, 1fr)) erstellt ein reaktionsfähiges Kartenraster – so viele ≥250px-Spalten wie hineinpassen, keine Medienabfragen – das am häufigsten kopierte Rasterrezept, das es gibt.

Die Musterbibliothek, die es beschleunigt: Fotogalerien (automatisch angepasste Raster), Dashboard-Panels (explizite Bereiche), Formulare mit ausgerichteten Beschriftungs-/Feldspalten und die heilige Gral-Seitenhülle (Kopfzeile). (über alle Spalten, Seitenleiste, Hauptzeile, Fußzeile), die Layout-Systeme zwei Jahrzehnte lang verfolgt haben, und Grid-Dispatches in sechs Zeilen. Elemente werden automatisch in der Quellreihenfolge angeordnet; Spanning (ein Element, das mehrere Spuren abdeckt) fügt grid-column: span 2 pro Element hinzu.

Häufig gestellte Fragen

Ein Bruchteil des freien Platzes: 1 fr 2 fr teilt die verbleibende Breite um ein Drittel/zwei Drittel auf, nachdem feste Schienen platziert wurden. Es ist die native flexible Einheit von Grid – bevorzugen Sie sie gegenüber Prozentsätzen, die Lücken ignorieren.

Der Responsive-Grid-Einzeiler: Passen Sie so viele Spalten mit mindestens 250 Pixel an, wie der Container zulässt, strecken Sie sie gleichmäßig, fließen Sie bei Größenänderung neu – Kartenlayouts ohne eine einzige Medienabfrage.

Zum Artikel: Grid-Spalte: Spanne 2 (oder explizite Zeilen: Grid-Spalte: 1/3). Zeilen funktionieren genauso wie Rasterzeilen. Beim Spanning handelt es sich um CSS pro Element über der Containervorlage.

Raster, wenn Karten in strengen Zeilen UND Spalten ausgerichtet sein müssen (gleiche Höhen, sauberes Gitter); Flexbox mit Umhüllung, wenn die Kartengröße unabhängig voneinander variiert werden kann. Das Rezept für die automatische Anpassung machte Grid zur Standardlösung für Galerien.

Anzeige:Gitter; Rastervorlagenspalten: 250px 1fr; Lücke: 24px – feste Seitenleiste, flüssige Hauptleiste. Fügen Sie „grid-template-rows“ und einen Header hinzu, der sich über beide Spalten erstreckt (grid-column: 1 / -1) für die Vollseiten-Shell.