Generador de Grid CSS

Diseña maquetaciones CSS Grid visualmente, columnas, filas y espacios, pinta áreas con nombre y copia el CSS y HTML listos. Gratis, en tu navegador.

🌐 English

header
sidebar
main
Column sizes
Row sizes
Template areas — pick one and paint cells in the grid below
Output style

🔒 Privado por diseño: todo funciona localmente en tu navegador; nada se sube nunca a ningún servidor.

Escrito y mantenido por Última actualización

Cómo usar el generador de Grid CSS

  1. Define el número de columnas y filas y dale a cada pista un tamaño (1fr, 200px, auto, min-content y más).
  2. Ajusta el espacio de fila y el espacio de columna, se colapsan a un solo valor gap cuando son iguales.
  3. Escribe un nombre (como header o sidebar) y pulsa + Add area, luego pinta celdas en el grid para colocar esa área. Haz clic y arrastra para rellenar un rectángulo; usa Erase para borrar celdas.
  4. Elige un estilo de salida, Áreas de plantilla (grid-template-areas) o Basado en líneas (spans de grid-column / grid-row).
  5. Observa cómo la vista previa en vivo se actualiza al instante y pulsa Copy CSS y Copy HTML para pegar ambos en tu proyecto.

Todo funciona localmente en tu navegador, sin subidas, sin cuenta, sin ida y vuelta al servidor.

Diseña maquetaciones de grid visualmente en lugar de contar líneas

CSS Grid es el sistema de maquetación más potente de la web, pero escribir grid-template-areas a mano es delicado: cada cadena de fila necesita exactamente una palabra por columna, cada área con nombre tiene que formar un rectángulo perfecto y una sola palabra desalineada rompe silenciosamente toda la maquetación. Esta herramienta convierte eso en un trabajo visual, pintas regiones sobre un grid, observas la vista previa y solo ves el CSS generado cuando ya se ve bien.

Pistas, espacios y unidades

Las columnas y filas se definen como pistas. Las unidades fraccionarias (fr) reparten el espacio sobrante de forma proporcional: 1fr 2fr da un grid de dos columnas donde la segunda es el doble de ancha. Las unidades fijas como px, em, rem y % fijan una pista a un tamaño concreto, mientras que auto, min-content y max-content la ajustan a su contenido. Los espacios de fila y columna son independientes, así que puedes tener columnas ajustadas y filas amplias (o al revés); cuando coinciden, el generador escribe la forma abreviada gap: 16px en lugar de gap: 16px 16px.

El HTML encaja con el CSS

Cada maquetación viene con un HTML de ejemplo cuyos nombres de clase coinciden exactamente con el CSS generado. En el modo áreas de plantilla obtienes un <div class="grid-area-header"> por cada región con nombre; sin áreas con nombre obtienes celdas numeradas <div class="grid-item"> que fluyen en el grid automáticamente. Pega juntos el CSS y el HTML y la maquetación se renderiza de inmediato, sin renombrar, sin adivinar.

Usos habituales

Cómo funciona, en imágenes

Captura de pantalla de la herramienta Generador de Grid CSS con un constructor visual de rejillas con áreas nombradas dispuestas sobre una vista previa en vivo, y debajo el CSS correspondiente (grid-template-columns, grid-template-rows, gap y grid-template-areas) que se actualiza al cambiar la disposición
Generador de Grid CSS en pleno proceso: un constructor visual de rejillas con áreas nombradas dispuestas sobre una vista previa en vivo, y debajo el CSS correspondiente (grid-template-columns, grid-template-rows, gap y grid-template-areas) que se actualiza al cambiar la disposición.
Diagrama: dónde ocurre el trabajo en una página de SysFenix que no tiene ninguna entrada de archivo: la herramienta llega como JavaScript normal dentro de la página, calcula la respuesta en tu propio dispositivo y la muestra ahí mismo, de modo que la subida, la cola y el registro en servidor que necesita una herramienta online típica no ocurren nunca
Dónde ocurre el trabajo en una página de SysFenix que no tiene ninguna entrada de archivo: la herramienta llega como JavaScript normal dentro de la página, calcula la respuesta en tu propio dispositivo y la muestra ahí mismo, de modo que la subida, la cola y el registro en servidor que necesita una herramienta online típica no ocurren nunca.

Preguntas frecuentes

¿Qué CSS genera exactamente esta herramienta?

Una regla lista para pegar sobre una clase `.grid-container`, por ejemplo `display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 10px;` y, cuando nombras áreas de plantilla, un bloque `grid-template-areas` como `"header header header" "sidebar main main"` más una pequeña regla `.grid-area-header { grid-area: header; }` por cada área. También te da un HTML de ejemplo cuyos nombres de clase encajan con el CSS, para que al pegar ambos se renderice la maquetación al instante.

¿Qué son las áreas de plantilla y por qué deben ser rectangulares?

`grid-template-areas` te deja nombrar regiones del grid (como header, sidebar, main, footer) y disponerlas como un mapa visual, una cadena entre comillas por fila, con una palabra por columna. La regla es que cada área con nombre debe formar un rectángulo sólido; una forma en L o un nombre partido en dos bloques desconectados es inválida y el navegador descarta todo el valor `grid-template-areas`. Esta herramienta lo comprueba por ti: si pintas un área no rectangular, la marca y la deja fuera del código generado en lugar de emitir CSS que el navegador rechazaría.

¿Cuál es la diferencia entre el estilo "Áreas de plantilla" y "Basado en líneas"?

Ambos describen la misma maquetación, solo que con CSS distinto. Áreas de plantilla emite `grid-template-areas` en el contenedor más `grid-area: nombre` en cada hijo, muy legible. Basado en líneas emite en su lugar `grid-column: 2 / span 2; grid-row: 2 / span 1;` en cada hijo, calculado a partir de donde lo pintaste, y omite `grid-template-areas` del contenedor. Elige el estilo que prefiera tu código; el resultado visual es idéntico.

¿Cuántas columnas y filas puedo crear y qué tamaños de pista admite?

Puedes definir de 1 a 12 columnas y de 1 a 12 filas. Cada pista puede usar unidades fraccionarias (`fr`), píxeles, porcentajes, `em`, `rem`, unidades de viewport (`vw`/`vh`) o las palabras clave `auto`, `min-content` y `max-content`, los mismos valores que escribirías a mano en `grid-template-columns`. Los espacios de fila y columna se definen por separado y se colapsan a un solo valor `gap` automáticamente cuando son iguales.

¿La vista previa coincide con el CSS que copio?

Sí, la vista previa se renderiza a partir de la misma cadena CSS generada que copias (solo se acota el selector para que los estilos de la vista previa no se filtren al resto de esta página), así que lo que ves es lo que obtienes. Copiar CSS te da la hoja de estilos y Copiar HTML te da el marcado que encaja.

¿Se sube o se guarda algo?

No. Todo el editor funciona en tu navegador, sin cuenta, sin servidor y sin almacenamiento, nada de tu maquetación sale de tu dispositivo. Copia el CSS y el HTML antes de cerrar la pestaña, porque al recargar el grid vuelve a su maquetación inicial.

Herramientas relacionadas