CSS Grid Generator

Generador CSS Grid

Generador CSS Grid gratis: vista previa live, CSS y Tailwind simultáneos, editor de grid-template-areas y demo auto-fill vs auto-fit. Sin registro.

Actualizado junio de 2026

Presets Rápidos
Configuración del Layout
Modo
3
2
16px
Tamaños de track personalizados
justify-items stretch
align-items stretch
Canvas Interactivo
6/12
Código 
<div class="grid grid-cols-3 grid-rows-2 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
Ítem

Haz clic en un ítem del canvas para editar sus spans de columna y fila.

Laboratorio Auto-fill vs Auto-fit

auto-fill crea tantos tracks como sea posible y mantiene los vacíos — auto-fit colapsa los tracks vacíos y los ítems se expanden para llenar la fila. Arrastra el slider para ver la diferencia.

3
160px
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
1
2
3

Generador CSS Grid — Builder Visual con Salida Tailwind y CSS

Construye cualquier layout CSS Grid visualmente — ajusta columnas, filas, gap y spans de los ítems y mira cómo el grid se actualiza en tiempo real. Este generador css grid exporta tu layout como CSS puro y clases Tailwind a la vez, algo que ningún otro grid generator ofrece. Empieza desde un preset (Holy Grail, Dashboard, Card Grid) o desde cero.

Además de lo básico, tienes un editor visual de grid-template-areas para layouts con nombre, breakpoints responsivos con media queries mobile-first y un laboratorio interactivo de auto-fill vs auto-fit — la parte más confusa de CSS Grid, por fin explicada en la práctica.

Cómo Usar el Generador CSS Grid

De un grid en blanco a código listo para producción en menos de un minuto:

  1. Elige un preset o define los tracks — haz clic en Holy Grail, Dashboard, Card Grid, Magazine, Mosaic, App Shell o 12-Column, o arrastra los sliders de Columnas y Filas. El canvas interactivo se actualiza al instante.
  2. Ajusta los ítems — en modo Spans, haz clic en cualquier ítem del canvas y modifica su col-span, row-span y posición inicial. En modo Áreas Nombradas, escribe nombres (header, sidebar, main) directamente en la matriz del editor y el layout se reorganiza en vivo.
  3. Refina los tracks — escribe tamaños personalizados como 200px 1fr minmax(150px, 1fr) para mezclar columnas fijas y flexibles; el canvas y el código reflejan cada cambio.
  4. Copia el código — alterna entre las pestañas Tailwind, CSS, HTML y Responsivo y pulsa Copiar (o presiona Shift+Enter). La pestaña Responsivo genera media queries mobile-first automáticamente.

Ejemplos del Generador CSS Grid

Algunas configuraciones reales y el código exacto que produce el generador:

Ejemplo — grilla de cards de 3 columnas:

Config:   3 columnas, 2 filas, gap 16px
CSS:      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
Tailwind: grid grid-cols-3 grid-rows-2 gap-4

Ejemplo — layout Holy Grail (áreas nombradas):

Config: columnas 200px 1fr 200px, áreas "header header header" / "sidebar main aside" / "footer footer footer"
CSS:    grid-template-areas: "header header header" "sidebar main aside" "footer footer footer";
        .header { grid-area: header; } …

Ejemplo — ítem que ocupa 2 columnas:

Config:   ítem 1 con col-span 2
CSS:      .item-1 { grid-column: span 2; }
Tailwind: <div class="col-span-2">1</div>

Ejemplo — tracks personalizados con minmax (caso especial):

Config:   grid-template-columns: 200px 1fr minmax(150px, 1fr)
Tailwind: grid-cols-[200px_1fr_minmax(150px,1fr)]   ← valor arbitrario, generado automáticamente

Ejemplo — celda vacía en áreas nombradas (caso especial):

Config: deja una celda en blanco en el editor de áreas
Salida: grid-template-areas: "header header" ". main"   ← el punto es una celda vacía válida

CSS Grid — Qué Es y Por Qué Importa

CSS Grid Layout es un sistema de layout bidimensional que controla columnas y filas simultáneamente. A diferencia de Flexbox, que es unidimensional (una fila O una columna), Grid posiciona ítems en ambos ejes a la vez — ideal para layouts de página, dashboards, grillas de cards y cualquier UI donde los elementos deben alinearse horizontal y verticalmente.

La unidad fr es el superpoder de Grid: representa una fracción del espacio restante después de colocar los tracks fijos. grid-template-columns: 200px 1fr 1fr en un contenedor de 800px produce una sidebar de 200px y dos columnas de 300px — sin cálculos de porcentajes. Combinada con minmax() y repeat(auto-fill, …), permite grids totalmente responsivos sin escribir una sola media query.

Casos de Uso Comunes

  • Layouts de página (Holy Grail): header, footer y tres columnas en el medio en seis líneas de CSS — un layout que antes requería hacks con float. El preset Holy Grail lo genera al instante.
  • Dashboards: sidebar fija más un área de contenido flexible con zonas de stats y widgets. Las áreas nombradas mantienen el CSS legible a medida que el dashboard crece.
  • Galerías de productos/cards: repeat(auto-fill, minmax(250px, 1fr)) crea una galería que pasa de 4 columnas a 1 según se encoge el viewport — cero breakpoints.
  • Proyectos Tailwind: la pestaña Tailwind genera grid-cols-*, col-span-* y valores arbitrarios como grid-cols-[200px_1fr], listos para pegar en componentes React, Vue o Svelte.
  • Layouts editoriales/revista: combina un hero de ancho completo con columnas asimétricas usando el preset Magazine y ajusta los spans por bloque.

Errores Comunes con CSS Grid

  • Usar auto-fit cuando querías auto-fill: con pocos ítems, auto-fit los estira por toda la fila — una sola card puede ocupar todo el contenedor. Usa el laboratorio bajo el canvas para comparar antes de decidir.
  • Áreas nombradas no rectangulares: grid-template-areas exige que cada área forme un rectángulo. Un área en forma de "L" invalida silenciosamente todo el template y el navegador recurre al posicionamiento automático.
  • Confundir fr con %: 1fr es una fracción del espacio sobrante, mientras 33% es del contenedor total — los porcentajes combinados con gap causan overflow; fr descuenta los gaps automáticamente.
  • Spans mayores que el número de tracks: un ítem con col-span-4 en un grid de 3 columnas fuerza una cuarta columna implícita. El generador limita los spans al número de columnas en el preview para hacerlo visible.

Preguntas Frecuentes

¿Cuál es la diferencia entre auto-fill y auto-fit en CSS Grid?

Ambos crean tantos tracks como quepan en el contenedor con repeat(). La diferencia aparece cuando los ítems no llenan la fila: auto-fill mantiene los tracks vacíos, conservando tamaños consistentes, mientras auto-fit colapsa los tracks vacíos y los ítems existentes se estiran para llenar el espacio. Usa auto-fit en galerías que siempre deben ocupar todo el ancho; usa auto-fill cuando la consistencia de tamaños importa más.

¿Qué es la unidad fr en CSS Grid?

La unidad fr (fracción) representa una fracción del espacio disponible después de colocar los tracks de tamaño fijo. Por ejemplo, grid-template-columns: 200px 1fr 1fr en un contenedor de 800px da 200px, 300px y 300px. A diferencia de los porcentajes, fr opera sobre el espacio restante y descuenta los gaps, siendo más confiable al mezclar tracks fijos y flexibles.

¿Cómo hago un grid responsivo sin media queries?

Usa grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). Esto crea tantas columnas de mínimo 250px como quepan en el contenedor y ajusta la cantidad automáticamente cuando cambia el viewport — 4 columnas en desktop, 2 en tablet, 1 en móvil, sin ninguna media query. El laboratorio auto-fill vs auto-fit de este generador te permite probar el patrón en vivo.

¿Cómo funciona grid-template-areas?

Define el layout como un mapa visual de texto: cada string entre comillas es una fila, cada palabra es un área nombrada y el punto (.) marca una celda vacía. Los elementos se asignan con grid-area: nombre. La restricción es que toda área debe ser rectangular — repite el nombre en celdas vecinas para que un área ocupe varias columnas o filas. El modo Áreas Nombradas de este generador construye el template mientras escribes los nombres en las celdas.

¿Puedo exportar el grid como clases Tailwind?

Sí — la pestaña Tailwind convierte tu configuración en clases utilitarias en tiempo real: grid-cols-3, gap-4, col-span-2, etc. Los tracks personalizados se convierten en valores arbitrarios como grid-cols-[200px_1fr_200px], y las áreas nombradas usan la sintaxis de propiedad arbitraria de Tailwind ([grid-area:header]) — incluso los layouts complejos funcionan sin tocar tu config de Tailwind.

Recursos

Herramientas relacionadas