¿Necesitas crear layouts web modernos y responsivos? Este generador de CSS Grid te permite diseñar sistemas de cuadrícula bidimensionales de forma visual. Ajusta columnas, filas, espaciados y alineación en tiempo real. Perfecto para desarrolladores frontend, diseñadores UI/UX y creadores de sitios web responsivos.
✓ Columnas y filas personalizables ✓ Espaciado (gap) ajustable ✓ Alineación horizontal y vertical ✓ Presets populares ✓ Código CSS listo para copiar ✓ Compatible con todos los navegadores modernos
Crea layouts con CSS Grid de forma visual. Ajusta columnas, filas, espacios y alineación. Ideal para diseños responsivos y complejos.
* CSS Grid es el sistema más potente para layouts bidimensionales
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px;
/* Código CSS generado */
/* Selecciona un formato */
Define las columnas. Usa fr para fracciones, px para fijos, auto para automático.
Define las filas. Misma sintaxis que las columnas.
Espacio entre celdas. Puede ser gap: 10px o separado row-gap y column-gap.
repeat(auto-fit, minmax(250px, 1fr)) para crear grids responsivos que se adaptan al ancho disponible.
No hay grids guardados
CSS Grid es un sistema de maquetación bidimensional que permite crear layouts complejos y responsivos de manera sencilla. A diferencia de Flexbox (unidimensional), Grid trabaja con filas y columnas simultáneamente.
Ajusta los controles para definir columnas, filas, espaciado y alineación. La vista previa se actualiza en tiempo real. Cuando estés satisfecho, copia el código CSS generado en el formato que prefieras.
"fr" significa "fracción". Distribuye el espacio disponible proporcionalmente. Por ejemplo, "1fr 2fr" asigna el doble de espacio a la segunda columna que a la primera.
Usa CSS Grid para layouts bidimensionales (filas Y columnas). Usa Flexbox para layouts unidimensionales (una fila O una columna). Ambos se complementan perfectamente.
Sí, CSS Grid es compatible con todos los navegadores modernos (Chrome, Firefox, Safari, Edge). Para navegadores antiguos como IE11, el soporte es limitado.