Generador y Visualizador Interactivo de CSS Grid Layout

Diseña estructuras CSS Grid complejas visualmente, ajusta filas, columnas, espacios y obtén el código listo para usar.

Generador y Visualizador de CSS Grid

Personaliza tu retícula CSS Grid en tiempo real y copia el código listo para tu proyecto.

Columnas (grid-template-columns)

Ej: 1fr 2fr 1fr, repeat(4, 1fr)

Filas (grid-template-rows)

Ej: 100px auto, repeat(2, 1fr)

Gap Filas

Gap Columnas

Número de Elementos de Ejemplo: 6

Visualización en Vivo

Elemento 1

Elemento 2

Elemento 3

Elemento 4

Elemento 5

Elemento 6

Código CSS Generado

.mi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  row-gap: 15px;
  column-gap: 15px;
}