Generador de CSS Grid
Editor visual de CSS Grid con filas × columnas (cualquier valor de pista: fr, px, %, auto, minmax, repeat), espacios de filas y columnas independientes, áreas de cuadrícula con nombre mediante clic para pintar, justify/align para elementos y contenido, 6 plantillas listas y vista previa en vivo. Exporta como CSS puro (con selectores .area) o como clase Tailwind de valor arbitrario.
Everything runs in your browser. Nothing is uploaded.
Cómo usar este generador de css grid
- Elige una plantilla (12 columnas, Holy Grail, Dashboard, Bento, Gallery, Card row) o define filas + columnas tú mismo.
- Edita cada pista con un valor CSS válido: 1fr, 200px, minmax(120px, 1fr), repeat(auto-fill, minmax(180px, 1fr)).
- Ajusta los espacios de filas/columnas con los deslizadores.
- Activa 'áreas de cuadrícula con nombre' para pintar celdas con nombres de área — elige un color y haz clic en las celdas.
- Ajusta justify/align para los elementos y el contenido, y copia el CSS o Tailwind resultante.
Preguntas frecuentes
¿Qué es grid-template-areas?
Un método para diseñar una cuadrícula dando un nombre a cada celda y luego asignando esos nombres a los elementos hijos mediante `grid-area`. Ideal para header/sidebar/main/footer.
¿Cuál es la diferencia entre fr, auto y minmax?
`fr` reparte el espacio restante entre las pistas. `auto` se ajusta al contenido. `minmax(min, max)` limita una pista entre dos valores — combinado con `repeat(auto-fill, ...)` genera cuadrículas responsivas.
¿La salida de Tailwind lo cubre todo?
Lo mejor posible: los patrones simples (grid-cols-N, gap, items-X) usan clases integradas; las pistas complejas recurren a selectores de valor arbitrario.
¿Por qué `gap` no funciona en mi cuadrícula en versiones antiguas de Safari?
`gap` para CSS Grid es compatible desde Safari 10.1 (2017), y `gap` para Flexbox desde Safari 14.1 (2021). Si necesitas dar soporte a iOS 13 o anterior, usa `grid-row-gap` y `grid-column-gap` como alternativa (funcionan desde Safari 10), y usa márgenes en los hijos flex en lugar de `gap`.