Generador visual de CSS Grid en línea
Genera CSS Grid visualmente (columnas, filas, gap), directamente en tu navegador.
1fr = equal fraction of space. Adapt to your needs (px, %, auto…).
🔒 100 % en el cliente — no se envía ningún dato
Crea visualmente tu maquetación con CSS Grid definiendo columnas, filas y gap, y luego copia el código generado. La vista previa se actualiza en directo, 100% en tu navegador y sin registro. Ideal para prototipar maquetaciones complejas sin escribir todo el CSS a mano.
What is it for?
- ▸ Definir una cuadrícula de columnas y filas con grid-template
- ▸ Establecer el espaciado entre celdas con la propiedad gap
- ▸ Prototipar una galería o un panel con CSS Grid
- ▸ Aprender CSS Grid viendo el efecto de cada ajuste
FAQ
¿Cómo creo un CSS Grid responsive?
Define tus columnas con unidades flexibles como fr y minmax en el generador; produce el grid-template-columns correspondiente que copias en tu CSS.
¿Debo usar CSS Grid o Flexbox?
Grid es adecuado para maquetaciones bidimensionales (columnas y filas), mientras que Flexbox es ideal para alinear a lo largo de un solo eje; a menudo se combinan.
¿Qué hace la propiedad gap en una cuadrícula?
La propiedad gap establece el espacio entre las columnas y filas de la cuadrícula sin añadir márgenes en los bordes; la vista previa muestra el resultado en tiempo real.