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
Revisado por Rafael Duarte
<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>Haz clic en un ítem del canvas para editar sus spans de columna y fila.
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.
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));Cómo funciona
De un grid en blanco al código listo en menos de un minuto
1. Elige un preset o define columnas y filas
Holy Grail, Dashboard, Card Grid... o mueve los sliders de columnas, filas y gap a mano.
2. Ajusta ítems o áreas nombradas
En modo Spans, haz clic en un ítem para fijar col-span/row-span. En modo Áreas, escribe los nombres directo en la matriz.
3. Copia el código que necesites
Tailwind, CSS puro, HTML o la pestaña Responsivo con media queries mobile-first ya generadas.
Qué hace este generador CSS Grid
Salida dual en CSS y Tailwind, editor visual de áreas nombradas
CSS y Tailwind al mismo tiempo
Ves el resultado en ambos formatos en la misma pantalla, sin tener que convertir nada a mano.
Editor de grid-template-areas
Escribe el nombre de cada área directo en la cuadrícula y el layout se reorganiza en vivo.
Laboratorio auto-fill vs auto-fit
La parte que más confunde de CSS Grid, explicada con una demo interactiva que puedes tocar.
Pestaña Responsivo
Genera media queries mobile-first automáticamente a partir de la configuración que ya armaste.
Alineación con justify-items y align-items
Ajusta el alineado de los ítems dentro de cada celda -stretch, start, center o end- sin escribir una línea de CSS.
Posicionamiento explícito con col-start/row-start
Además de los spans, define en qué columna y fila exacta arranca un ítem, útil para saltar o superponer celdas a propósito.
Ejemplos
Cuándo usar este generador
Los escenarios más comunes entre quienes lo usan
Layout completo de página (Holy Grail)
Header, footer y tres columnas en el medio: el preset genera toda la estructura al instante.
Dashboards y paneles de administración
Sidebar fija más contenido flexible: las áreas nombradas mantienen el CSS legible aunque el panel crezca.
Galerías de productos o tarjetas
auto-fill + minmax crea una galería que pasa de 4 columnas a 1 sin escribir un solo media query.
Proyectos con Tailwind CSS
La pestaña Tailwind entrega grid-cols-*, col-span-* y valores arbitrarios listos para React, Vue o Svelte.
Layouts editoriales tipo revista
El preset Magazine combina un hero a todo lo ancho con columnas asimétricas, ideal para blogs y landings de contenido.
Sistemas de grid de 12 columnas
El preset 12-Column replica la retícula clásica de los frameworks de diseño, con cada ítem ocupando una fracción del ancho total.
Errores comunes con CSS Grid
Áreas nombradas que no forman un rectángulo
Un área en forma de "L" invalida el template completo sin avisar, y el navegador vuelve al posicionamiento automático.
Confundir fr con %
1fr es una fracción del espacio que sobra después de los tracks fijos; % es una fracción del total. Mezclarlos con gap suele causar overflow.
Un span más grande que el número de columnas
Poner col-span-4 en un grid de 3 columnas obliga al navegador a crear una cuarta columna implícita que no estaba en el plan.
Usar auto-fit cuando lo que se quería era auto-fill
Con pocos ítems, auto-fit estira los existentes hasta llenar toda la fila; una sola tarjeta puede terminar ocupando el contenedor completo sin ningún aviso.
Por qué usar este generador CSS Grid
El editor visual de grid-template-areas y el laboratorio auto-fill vs auto-fit hacen tangibles las dos partes de CSS Grid que más cuesta entender de forma abstracta.
La pestaña Responsivo genera las media queries mobile-first por ti, así que no hace falta escribir los breakpoints a mano después de armar el layout.
A diferencia de Flexbox, que organiza ítems en una sola dirección, CSS Grid controla columnas y filas al mismo tiempo. Por eso esta herramienta cubre desde el layout completo de la página hasta el ajuste fino de un solo ítem, todo en un mismo lugar.
auto-fill vs. auto-fit
La confusión más común de CSS Grid
Preguntas frecuentes
Ambos crean tantos tracks como quepan al usar repeat(). Cuando los ítems no llenan toda la fila, auto-fill mantiene los tracks vacíos, mientras que auto-fit los colapsa y estira los ítems existentes para ocupar el espacio.
Referencias
Artículo relacionado
Como criar layouts responsivos sem frameworks (CSS puro em 2026)
Herramientas relacionadas
- Verificador de Contraste de Colores Diseño Verificador de contraste de colores gratuito — verifica conformidad WCAG 2.2 AA y AAA al instante. Vista previa en vivo, simulación de daltonismo y...
- Conversor de Colores Diseño Convierte colores entre HEX, RGB, HSL y CMYK al instante. Selector de color gratuito online con comprobador de contraste WCAG y generador de paletas.
- Generador de Paleta de Colores Diseño Genera paletas de colores armoniosas desde cualquier color base. Elige armonía Análoga, Complementaria, Triádica o Tetrádica — exporta como CSS variables o...
- Paleta de Colores desde Imagen Diseño Extrae paletas de colores de cualquier imagen — obtén códigos HEX, RGB, HSL y exporta como CSS variables, Tailwind, JSON o PNG. 100% en el navegador, sin...
- Generador CSS Box Shadow — Neumorfismo, Glassmorfismo y Tailwind Diseño Generador CSS box shadow gratuito con vista previa en tiempo real. Crea sombras, efectos neumorfismo y glassmorfismo. Exporta a CSS, Tailwind o variables CSS.
