Generador de CSS Grid
Crea diseños CSS Grid de forma visual: grid-template-columns/rows, áreas con nombre validadas, gaps, alineación y colocación de cada elemento. Copia CSS limpio.
Ajustes predefinidos
Contenedor
Una línea por fila, nombres separados por espacios y un punto (.) para una celda vacía. Cada nombre debe formar un rectángulo.
Elemento 1
Selecciona un elemento aquí o haz clic en él en la vista previa.
Ejemplos: 1 / 3, span 2, 2 / -1. Un nombre de área anula la colocación por líneas.
Vista previa
Arrastra la esquina inferior de la vista previa para cambiar el tamaño del contenedor.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}Herramientas Relacionadas
Ver Todas¿Qué es Generador de CSS Grid?
Un constructor de diseños CSS Grid en el que escribes cualquier plantilla de pistas (por ejemplo, repeat(auto-fill, minmax(120px, 1fr))), dibujas áreas con nombre, ajustas gaps y alineación y colocas elementos individuales por números de línea, spans o nombres de área. La vista previa en vivo usa el CSS generado.
Cómo usar Generador de CSS Grid
- Empieza con un ajuste predefinido (3 columnas, Tarjetas adaptables, Diseño Santo Grial, Barra lateral, Bento) o escribe grid-template-columns y grid-template-rows.
- Si quieres, escribe grid-template-areas: una línea por fila, nombres separados por espacios y un punto para una celda vacía.
- Ajusta row-gap, column-gap, justify-items, align-items y el Número de elementos.
- Selecciona un elemento y ajusta grid-column y grid-row (p. ej., 1 / 3, span 2) o elige un grid-area.
- Copia el código CSS.
Ejemplo
grid-template-columns 200px 1fr, row-gap 8px, column-gap 16px; item 2: grid-column 1 / 3, grid-row span 2
.container {
display: grid;
grid-template-columns: 200px 1fr;
gap: 8px 16px;
}
.item-2 {
grid-column: 1 / 3;
grid-row: span 2;
} Cuándo usar Generador de CSS Grid
Usa grid para diseños bidimensionales: esqueletos de página, paneles, galerías y cuadrículas de tarjetas. Para una sola fila o columna de elementos que se dimensionan según su contenido, flexbox suele ser más sencillo (consulta el Generador de Flexbox CSS).
Cómo funciona Generador de CSS Grid
Las plantillas y los valores de colocación se comprueban con CSS.supports() del propio navegador, así que se acepta cualquier cosa válida en CSS y los valores no válidos se señalan. El texto de las áreas se valida: todas las filas necesitan el mismo número de celdas y cada nombre debe formar un único rectángulo. La salida contiene display: grid, las plantillas, grid-template-areas con una cadena entre comillas por fila, gap (un valor si los gaps de fila y columna son iguales, row column si no) y la alineación solo cuando no es stretch. Los elementos reciben reglas grid-area o grid-column/grid-row solo cuando se definen.
Casos de Uso Comunes
- Esqueletos de página con cabecera, barra lateral, contenido principal y pie
- Galerías de tarjetas adaptables con auto-fill y minmax()
- Paneles tipo bento con mosaicos que ocupan varias celdas
- Diseños de revista con áreas con nombre
- Diseños de formularios con columnas de etiquetas y campos
Preguntas Frecuentes
¿Por qué dice que mi área no es un rectángulo?
En grid-template-areas cada nombre debe ocupar un bloque rectangular de celdas. Las formas en L o los nombres repartidos en sitios separados son CSS no válido y toda la propiedad se ignoraría.
¿Qué diferencia hay entre auto-fill y auto-fit?
Ambos crean tantas columnas como quepan. auto-fill conserva las pistas vacías, mientras que auto-fit las colapsa para que los elementos existentes se estiren y llenen la fila.
¿Cómo hago que un elemento ocupe todo el ancho?
Ajusta grid-column a 1 / -1; -1 se refiere a la última línea de la cuadrícula.