Generador de CSS Grid

Un constructor visual de diseños CSS Grid. Define el tamaño de columnas y filas con fr, px, %, auto, minmax() o un valor personalizado validado, pinta áreas con nombre o crea una cuadrícula de tarjetas adaptable con auto-fit. La vista previa es un contenedor CSS Grid real que usa las mismas declaraciones que el código generado: lo que ves es lo que copias.

1. 1.Elige un modo: Pistas, Áreas con nombre o Adaptable, o carga una plantilla.
2. 2.Ajusta los tamaños de columnas y filas, el espaciado y la alineación.
3. 3.En Pistas, haz clic en un elemento de la vista previa para que ocupe varias columnas o filas.
4. 4.En Áreas con nombre, escribe un nombre y haz clic en las celdas para pintar cada área.
5. 5.Copia o descarga el CSS o la página HTML independiente.

Cada área con nombre debe formar un rectángulo completo; de lo contrario, los navegadores ignoran toda la declaración grid-template-areas. El generador explica qué área incumple la regla y mantiene el último diseño válido en la vista previa y el código hasta que lo corrijas. Los tamaños de pista personalizados se comprueban antes de aplicarse.

Hasta 12 columnas, 12 filas y 48 elementos. Los tamaños personalizados aceptan longitudes, porcentajes, fr, auto, min-content, max-content, minmax() y fit-content(); no se aceptan calc(), var(), nombres de línea ni repeat() dentro de una sola pista. Los diseños solo se guardan en este navegador.