Kann ein responsives `repeat(auto-fit, minmax(...))` erzeugt werden?

Ja, Vorlagen für automatischen responsiven Umbruch ohne Media Queries sind integriert.

Kann ich das Verhalten bei schmalen Bildschirmen simulieren?

Ja, die Vorschaufläche lässt sich in der Breite stufenlos skalieren.

Curated Grid Architecture Presets

Grid Matrix Parameters

Columns Count3

Rows Count3

Column Gap (X)16px

Row Gap (Y)16px

Selected Cell (1) Spans

Click any tile in grid

grid-column: span1

grid-row: span1

Interactive Grid Matrix

Cell #1

Cell #2

Cell #3

Cell #4

Cell #5

Cell #6

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  column-gap: 16px;
  row-gap: 16px;
}

1Definieren Sie Spaltenanzahl, Zeilen und Abstände (Gap).
2Konfigurieren Sie Spaltenbreiten in Pixeln, Prozenten oder flexiblen `fr`-Bruchteilen.
3Kopieren Sie den kompletten CSS-Container- und Item-Code.

CSS-Grid ermöglicht die gleichzeitige präzise Kontrolle über Zeilen und Spalten und vereinfacht Dashboard-Raster enorm.

Full 2D CSS Grid Layout Engine: Generates grid-template-columns, grid-template-rows, and gap declarations.
Interactive Bento Grid generator: Visually build multi-cell spanning hero cards and modern feature blocks.
Tailwind Grid integration: Automatically maps column track counts to standard grid-cols-* utilities.
Instant live preview: Real-time rendering with responsive bounds and zero layout shift.