Generador de CSS Grid

Construye layouts CSS Grid visualmente—sin memorizar sintaxis. Configura columnas, filas, gaps, alineación, y tamaños (1fr, auto, minmax). Preview en vivo y copia CSS limpio.

Contenedor Grid

Columnas3

Filas2

Gap de Columna10px

Gap de Fila10px

Tamaño de Columna

Tamaño de Fila

Justify Items

Align Items

Justify Content

Align Content

Items del Grid: 6

CSS Generado

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 10px;
  row-gap: 10px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}

Preview en Vivo

1

2

3

4

5

6

Tip Pro: Usa '1fr' para columnas de ancho igual. ¿Grid responsivo sin media queries? Prueba 'minmax(250px, 1fr)' con auto-fit o auto-fill.

Generador de Layouts CSS Grid & Constructor de Templates

Crea layouts CSS Grid sin escribir código desde cero. Este generador visual te permite configurar columnas, filas, gaps y todas las propiedades de alineación. Experimenta con 1fr, auto y minmax(). Ve tu layout actualizarse en tiempo real y exporta CSS limpio con grid-template-columns, grid-template-rows y gaps—listo para producción.

1¿Cuándo usar esta herramienta?

💡Construir layouts de página responsivos para webs

💡Crear galerías de cards para portfolio o productos

💡Diseñar layouts de dashboard y paneles admin

💡Prototipar estructuras grid antes de codificar

💡Aprender CSS Grid interactivamente—ve cómo las propiedades afectan el layout

2Características

Constructor visual de layouts grid—no necesitas sintaxis CSS
Preview en tiempo real con items numerados
Control total: columnas, filas, gaps, todas las propiedades de alineación
Opciones de tamaño: 1fr (fracción), auto, minmax() para grids responsivos
CSS limpio con shorthand grid-template
Funciona offline—100% en cliente, sin subir datos

3Cómo usar

Elige el número de columnas y filas para tu layout.
Configura tamaños de columna/fila con 1fr (igual), auto, o minmax() para responsive.
Ajusta gaps y alineación (justify-items, align-items, etc.).
Mira el preview en vivo y copia el código CSS generado.

Preguntas Frecuentes

Q. ¿Cuál es la diferencia entre CSS Grid y Flexbox?

A. Grid es 2D (controla filas Y columnas), perfecto para layouts de página. Flexbox es 1D (fila O columna), ideal para componentes. Usa Grid para estructura, Flexbox para alinear dentro de componentes.

Q. ¿Qué significa '1fr' en CSS Grid?

A. '1fr' significa una fracción del espacio disponible. Por ejemplo, '1fr 2fr' hace la segunda columna el doble de ancha. Es la clave para columnas flexibles de ancho igual.

Q. ¿Cómo hago un grid responsivo sin media queries?

A. Usa 'repeat(auto-fit, minmax(250px, 1fr))' o auto-fill. Esto crea columnas de mínimo 250px que se ajustan automáticamente a nuevas filas en pantallas pequeñas.

Q. ¿Cuál es la diferencia entre auto-fit y auto-fill?

A. auto-fill crea tantos tracks como sea posible, incluso vacíos. auto-fit colapsa tracks vacíos para que los items se estiren. Normalmente auto-fit es lo que quieres.