Generador de CSS Grid
Configura columnas, filas y espacios con controles deslizantes y ve el resultado en directo. Copia el CSS y el HTML listos para pegar en tu proyecto.
Procesado 100% en tu navegador
CSS
HTML
Ctrl + Enter ejecutarCtrl + C copiar resultado
Cómo usar
- 1Ajusta el número de columnas y filas.
- 2Define el espacio entre columnas y filas.
- 3Elige el ancho de las columnas: iguales, fijas, automático o adaptable.
- 4Copia el CSS y el HTML generados.
Casos de uso
- Crear una galería de tarjetas que se adapta al ancho de pantalla.
- Montar el esqueleto de un dashboard.
- Aprender cómo funcionan grid-template-columns y gap.
- Prototipar layouts rápidamente antes de maquetar.
Preguntas frecuentes
¿Qué es CSS Grid?
Es un sistema de maquetación bidimensional de CSS que permite organizar elementos en filas y columnas.
¿Qué hace auto-fit con minmax?
Crea tantas columnas como quepan con un ancho mínimo, y las estira para ocupar el espacio: ideal para diseños adaptables sin media queries.
¿Qué significa 1fr?
Una fracción del espacio disponible. Tres columnas de 1fr reparten el ancho a partes iguales.
¿Funciona en todos los navegadores?
Sí, CSS Grid es compatible con todos los navegadores modernos.