Playground de CSS Grid

CSS Grid convierte un elemento en un layout bidimensional. Aplicas display: grid al contenedor, defines los tracks de columnas y filas con grid-template-columns y grid-template-rows, y el navegador coloca cada hijo en las celdas resultantes. Por ejemplo, grid-template-columns: repeat(3, 1fr) crea tres columnas iguales, y los hijos fluyen de izquierda a derecha, de arriba a abajo. A diferencia de los antiguos layouts con float o flexbox, el grid maneja filas y columnas al mismo tiempo, así controlas ambos ejes desde una sola propiedad del contenedor.

Añade display: grid a un contenedor y describe sus tracks. Lo mínimo es una línea: display: grid; grid-template-columns: 1fr 1fr; — que da dos columnas iguales. Desde ahí añades grid-template-rows para filas explícitas, gap para el espaciado, y reglas por elemento como grid-column: span 2 para que un hijo se extienda sobre varias celdas. La abreviatura grid puede combinar filas, columnas y áreas en una sola declaración, pero la mayoría de los desarrolladores definen grid-template-columns, gap y alineación por separado porque resulta más claro. Este generador escribe esas reglas por ti.

Definen el tamaño de cada track de columna y fila. grid-template-columns: 200px 1fr 1fr crea una primera columna fija de 200px y dos columnas flexibles que comparten el resto del espacio. grid-template-rows: auto 1fr establece una primera fila del tamaño del contenido y una segunda fila que ocupa la altura restante. Cada valor de la lista es un track, y el número de valores determina cuántas columnas o filas explícitas tiene el grid. Este generador construye ambas listas a medida que añades y editas tracks, actualizando la vista previa en tiempo real.

fr es la unidad 'fracción' — divide el espacio sobrante, así que repeat(3, 1fr) crea tres columnas de igual ancho. repeat(n, valor) es una abreviatura que repite un patrón de track n veces, por lo que repeat(4, 1fr) equivale a 1fr 1fr 1fr 1fr. minmax(min, max) define un track que nunca se encoge por debajo de min ni crece más allá de max; minmax(150px, 1fr) mantiene una columna de al menos 150px de ancho y deja que se expanda. Combínalos — repeat(auto-fit, minmax(150px, 1fr)) — para un grid que añade y elimina columnas por sí solo según cambia el ancho del contenedor.

Usa repeat() con auto-fit (o auto-fill) y minmax() para que el grid refluya automáticamente: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). Cada columna se mantiene con al menos 200px de ancho y el navegador encaja tantas como el contenedor permita, reduciendo a menos columnas en pantallas estrechas y añadiendo más en anchas. Cambia este generador al modo Responsive, establece el ancho mínimo de celda y copia el resultado. Es la forma más sencilla de construir una cuadrícula de tarjetas fluida que se adapte de móvil a escritorio sin escribir ni una sola media query.

grid-template-areas te permite nombrar regiones y dibujar el layout como arte ASCII. Asignas un nombre a cada hijo con grid-area y luego mapeas el grid como grid-template-areas: 'header header' 'sidebar main' 'footer footer'. Repetir un nombre en varias celdas hace que esa área las abarque, y un punto (.) deja una celda vacía. Es la forma más legible de construir estructuras de página clásicas — encabezado, barra lateral, contenido principal, pie de página — porque la plantilla se parece al layout. La pestaña Áreas de esta herramienta escribe la plantilla y las reglas grid-area correspondientes para cada región que nombres.

Para un grid 2x2, define dos columnas y dos filas: grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; y coloca cuatro elementos. Para un grid de 3 columnas, usa grid-template-columns: repeat(3, 1fr) y deja que los elementos fluyan en tantas filas como sean necesarias. En esta herramienta solo tienes que establecer el número de columnas y filas y la vista previa se actualiza de inmediato — sin necesidad de escribir código. El generador gestiona automáticamente la abreviatura repeat() cuando los tracks vecinos son del mismo tamaño.

La cuadrícula de 12 columnas es una convención de diseño popularizada por Bootstrap y Foundation que divide la página en doce columnas iguales. El doce funciona porque se divide de forma exacta en mitades, tercios, cuartos y sextos. Un componente puede abarcar cualquier número entero de columnas: 6 para la mitad, 4 para un tercio, 3 para un cuarto. Con CSS Grid lo recreas en una sola línea: grid-template-columns: repeat(12, 1fr), y usas grid-column: span 4 en los hijos para dimensionarlos. Pon 12 columnas aquí para obtener la clásica cuadrícula de framework en CSS puro, sin ninguna dependencia de Bootstrap.

Grid es bidimensional — controla filas y columnas al mismo tiempo — mientras que flexbox es unidimensional, disponiendo los elementos a lo largo de una sola fila o columna. Usa grid cuando construyas un layout de página completo o una cuadrícula de tarjetas con filas y columnas alineadas (dashboards, galerías, estructuras de página). Usa flexbox para una tira de contenido individual como una barra de navegación, una barra de herramientas o una fila de botones. Funcionan bien juntos: un grid para la estructura exterior de la página y flexbox dentro de las celdas individuales.

Tailwind incluye utilidades de grid: añade grid más grid-cols-3 para tres columnas iguales, gap-4 para el espaciado, y col-span-2 / row-span-2 en los hijos para que abarquen varias celdas. grid-cols-3 compila a repeat(3, minmax(0, 1fr)). Para algo personalizado — como un track auto-fit responsive — usa un valor arbitrario: grid-cols-[repeat(auto-fit,minmax(150px,1fr))]. Cambia la salida a la pestaña Tailwind y este generador escribe las clases de utilidad exactas para tu contenedor y cada elemento, listas para pegar en tu JSX o HTML.

Usa grid-column y grid-row en el hijo. grid-column: span 2 hace que un elemento tenga dos columnas de ancho; grid-column: 1 / 3 lo coloca desde la línea 1 hasta la línea 3 (también dos columnas). Lo mismo aplica verticalmente con grid-row: span 2. En Tailwind es col-span-2 y row-span-2. En este playground puedes arrastrar sobre las celdas en la vista previa para crear un elemento que las abarque, o escribir los valores exactos de inicio y span en el panel del elemento. La salida en CSS y Tailwind se actualiza a medida que avanzas.

La propiedad gap añade espacio entre tracks: gap: 16px pone 16px entre cada fila y columna. Puedes establecer los ejes por separado con gap: 24px 16px (row-gap y luego column-gap), o usar row-gap y column-gap directamente. El gap solo afecta al espacio entre celdas — nunca añade padding alrededor del borde exterior del grid, lo cual es una fuente común de confusión. Usa los controles de row-gap y column-gap de esta herramienta — vincúlalos para un gap uniforme o desvincula para ajustar cada eje de forma independiente.

Completamente gratis, sin registro y sin nada que instalar. Layoutit Grid es un buen punto de partida pero no tiene salida Tailwind y requiere navegar a una pestaña separada para copiar las reglas grid-area. El CSS Grid Generator de Sarah Drasner es una herramienta educativa minimalista sin controles a nivel de elemento ni enlaces para compartir. UtiloKit añade salida en Tailwind CSS, áreas de plantilla con nombre, modo responsive auto-fit, enlaces para compartir y un editor interactivo de elementos con arrastre para span — todo en un solo lugar. Todo se genera localmente en tu navegador, así que tus layouts nunca se suben a ningún servidor.

Sí. La herramienta es completamente responsive y funciona en cualquier navegador móvil moderno, incluidos Safari en iPhone y Chrome en Android. Crea layouts de grid sobre la marcha, copia la salida en CSS o Tailwind y pégala en tu proyecto. Como todo funciona del lado del cliente, no hay subidas, no hay cuenta y no hay esperas. Funciona incluso sin conexión una vez que la página se ha cargado. El editor de elementos con arrastre para span es compatible con pantallas táctiles, así que puedes construir layouts de grid complejos sin ratón.