¿Permite crear cuadrículas responsivas con `repeat(auto-fit, minmax(...))`?

Sí, incluye plantillas responsivas de autoajuste con un solo clic.

¿Puedo simular pantallas estrechas de móvil?

Sí, la caja de previsualización se puede redimensionar libremente.

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;
}

1Define el número de columnas, filas y el espacio de separación (gap).
2Configura el ancho de las pistas en píxeles, porcentajes o fracciones elásticas `fr`.
3Copia el código completo del contenedor y los elementos de la cuadrícula.

A diferencia de Flexbox, CSS Grid controla ambos ejes al mismo tiempo, simplificando la creación de interfaces avanzadas de paneles de datos.

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.

Diseña tarjetas con efecto de cristal esmerilado con desenfoque en tiempo real

Diseña sombras multicapa realistas y suaves con profundidad inset personalizable

Crea degradados lineales, radiales y cónicos con controles de color interactivos

Modela formas orgánicas y asimétricas usando la sintaxis avanzada de 8 valores