Generador de Grid CSS
Crea layouts con CSS Grid de forma visual. Define columnas, filas, gaps y plantillas. Vista previa en tiempo real y código CSS listo para copiar. 100% en tu navegador.
Vista previa
Referencia
¿Qué es CSS Grid?
CSS Grid es un sistema de diseño bidimensional que permite organizar contenido en filas y columnas simultáneamente. A diferencia de Flexbox (unidimensional), Grid es ideal para layouts de página completa, galerías, dashboards y cualquier diseño con estructura en dos ejes.
Plantillas de Grid
grid-template-columns y grid-template-rows definen la estructura del grid. Puedes usar valores fijos (200px), fracciones (1fr), auto, minmax(), o repeat(). Por ejemplo: repeat(3, 1fr) crea tres columnas iguales.
Privacidad
Todo el procesamiento se ejecuta 100% en tu navegador. No se envían datos a ningún servidor.