Generador de cuadrícula CSS (Grid)

Define un número de columnas, filas y un espaciado para obtener al instante el código CSS Grid correspondiente, con vista previa en vivo.

Ejemplo:

Cómo funciona

CSS Grid permite definir una cuadrícula bidimensional en una sola propiedad, a diferencia de Flexbox que gestiona un solo eje a la vez. Esta herramienta genera un grid-template-columns y grid-template-rows con columnas y filas de igual tamaño (1fr), práctico para una galería de imágenes o un panel de control con un solo clic.

¿Qué significa «1fr» en el código generado?

La unidad fr (fracción) reparte el espacio disponible en partes iguales entre las columnas o filas; repeat(3, 1fr) crea así tres columnas de ancho idéntico que se reparten todo el espacio del contenedor.

¿Puedo tener columnas de tamaños diferentes?

Sí, esta herramienta genera un punto de partida simple con columnas iguales; luego puedes editar manualmente grid-template-columns para usar valores fijos o variados como 200px 1fr 2fr.

Procesamiento 100% local: el código se genera íntegramente en tu navegador mediante WebAssembly.