¿Cómo usar esta herramienta?
- Elija un preset o defina columnas y filas vía los track controls con unit-picker (fr, px, %, auto, min-content, minmax).
- Clique las celdas de template areas y escriba nombres de región, por ej. header / sidebar / main / footer.
- Añada items, asigne grid-area o defina zonas columna/fila numéricamente. Active Subgrid por item cuando las cabeceras o pies de tarjetas necesiten una línea común.
- Active opcionalmente las Container Queries — el grid reacciona entonces a su propio ancho, no al viewport.
- Copie la salida: CSS, Tailwind v4 (arbitrary values), SCSS o HTML.
¿Qué hace el generador CSS Grid?
El generador construye layouts CSS Grid visualmente. Columnas y filas se definen vía track controls — un unit-picker por track (fr, px, %, auto, min-content, max-content, minmax) y un editor de valor. Cree las template areas clicando celdas en una matriz y escribiendo nombres de región. Inspectores por item permiten grid-area, zonas columna/fila numéricas, toggles Subgrid y overrides de order.
Encima de la configuración, una vista previa lado a lado muestra el layout en tres viewports simultáneamente — móvil (375 px), tableta (768 px) y escritorio (1280 px). Las ediciones se propagan en vivo a los tres. Esa es la diferencia decisiva con los generadores con breakpoint switcher: ve inmediatamente cómo un cambio de layout actúa en los tres dispositivos, en lugar de clicar cada uno por separado.
Nota sobre la vista previa: los tres viewports se renderizan vía reglas CSS scoped (sin <iframe>) para que la configuración permanezca cliente puro y compatible con SSR. Es ilustrativo, no pixel-perfect: las unidades vw, cqi y cqw se resuelven contra el ancho real de página de la herramienta, no contra los 375/768/1280 px de la stage. Para las primitivas fr, px, %, auto y minmax(), la representación es exacta; para los breakpoints @container, ve la lógica de conmutación correctamente, pero la resolución Container Query en la caja en escena es una aproximación.
La salida viene en cuatro formatos: CSS puro con display: grid más propiedades grid-template-*, Tailwind v4 con clases arbitrary-value para tracks y grid-template-areas, SCSS con variables $grid-* reutilizables, y markup HTML correspondiente para cada formato. Todas las pestañas son paste-ready.
¿Cómo funciona Subgrid?
subgrid resuelve un problema que CSS Grid no tuvo durante mucho tiempo: las tarjetas en una fila deben alinear sus cabeceras y pies en líneas comunes, aunque las longitudes de contenido varíen. Sin Subgrid, solo ayudan la sincronización de altura en JavaScript o renunciar al concepto de tarjeta. Con Subgrid, cada tarjeta pone grid-template-rows: subgrid y toma la definición de filas de su grid padre — cabecera y pie aterrizan automáticamente a la misma altura.
Soporte en navegador desde finales de 2023 generalizado: Chrome 117, Safari 16 y Firefox 71 soportan Subgrid en ambos ejes. La mayoría de los generadores online ignoran aún la función por completo. Este generador emite subgrid como toggle first-class por item más una píldora de estado en cuanto Subgrid está activo en algún sitio, para que pueda documentar requisitos de navegador de inmediato.
¿Cuándo se toman las Container Queries?
Las Container Queries (regla @container + container-type: inline-size) son la segunda gran innovación CSS layout de la década. Reaccionan al tamaño de un contenedor padre dado en lugar del ancho del viewport. Caso de uso: un componente Card que en la sidebar renderiza como stack compacto y en el área principal como bloque horizontal de tres columnas — sin tener que ensuciar el componente Card con clases específicas de la sidebar.
El generador emite en opt-in un wrapper .grid-container { container-type: inline-size; } más hasta tres bloques @container (min-width: Npx) con definiciones de tracks propias por breakpoint. El markup HTML se ajusta automáticamente en consecuencia. Las Container Queries se soportan desde 2023 en todos los grandes navegadores.
¿Cómo escribo CSS Grid en Tailwind v4?
Tailwind ha cambiado en v4 la configuración a CSS-First y normalizado ampliamente las arbitrary values. En lugar de la escala rígida grid-cols-12, el generador emite la expresión de track precisa:
| Concepto | Tailwind v4 | CSS puro |
|---|---|---|
| Tracks fr iguales | grid-cols-2 | grid-template-columns: 1fr 1fr |
| Unidades mixtas | grid-cols-[200px_1fr_auto] | grid-template-columns: 200px 1fr auto |
| Tarjetas responsivas | grid-cols-[repeat(auto-fill,minmax(280px,1fr))] | grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) |
| Template areas | [grid-template-areas:'header_header''sidebar_main'] | grid-template-areas: "header header" "sidebar main" |
| Subgrid | grid-cols-subgrid | grid-template-columns: subgrid |
| Item span | col-span-3 | grid-column: span 3 |
| Named area | [grid-area:header] | grid-area: header |
Los guiones bajos entre celdas en arbitrary values son un quirk de v4 — Tailwind no puede parsear espacios en nombres de clase, así que v4 usa _ como separador y convierte a espacios al build. El generador lo pone automáticamente correcto.
¿Qué presets de layout están incluidos?
Cinco layouts del mundo real curados:
Holy-Grail layout. Header arriba, sidebar/main/aside en medio, footer abajo. Clásico con grid-template-areas. Definición de item vía nombres en lugar de números de línea — muy legible en el stylesheet.
Rejilla de tarjetas. Tarjetas responsivas vía repeat(auto-fill, minmax(280px, 1fr)). Se reorganiza automáticamente en cuanto no hay sitio, sin Media Queries. Los contenidos de tarjeta deberían poner min-width: 0, si no una palabra larga puede romper el suelo minmax.
Layout de revista. Grid de 12 columnas con item spans para hero, lead, sidebar, feature y aside. Bastante flexible para la diversidad editorial, bastante estructurado para una reutilización coherente.
Dashboard. Header arriba, sidebar a la izquierda, content a la derecha, status abajo. Esqueleto admin-shell sólido sin position: absolute.
Tarjetas Subgrid. Tarjetas con filas de cabecera y pie alineadas vía subgrid. Demuestra el argumento más fuerte para Grid Level 2 — líneas verticales limpias sin helper JavaScript.
¿Qué significa el aviso de orden?
El criterio de éxito WCAG 2.2 1.3.2 «Meaningful Sequence» exige que el orden de lectura y tab corresponda al flujo de lectura visual. Si ordena items con order o grid-area de modo que un item declarado más tarde en el DOM aparece visualmente antes que uno declarado antes, ocurre lo siguiente:
- Las personas usuarias de ratón con visión leen el orden visual — el layout se siente correcto.
- Las personas usuarias de teclado saltan con Tab por el orden DOM — aterrizan en otra secuencia.
- Los lectores de pantalla leen igualmente el orden DOM — y verbalizan el layout de otra manera.
El generador señala esos drifts inline. Caminos de solución: o bien ajustar el orden DOM (declarar items en el orden visual deseado en el HTML) o bien reconstruir el layout para que no sea necesario ningún desplazamiento order/grid-area.
¿Cuáles son las trampas más frecuentes de CSS Grid?
min-content frente a 0. Los items tienen por defecto min-width: auto, que es el contenido mínimo intrínseco. Con palabras largas o imágenes anchas, un único item rompe el layout. Fix: min-width: 0 en el item — respeta entonces correctamente el minmax().
grid-template-areas con huecos. Cada fila necesita el mismo número de celdas. Rectángulos en lugar de formas en L — una región no puede extenderse sobre dos zonas no contiguas. Las celdas punto (.) marcan explícitamente sitios vacíos.
fr con ancho mínimo absoluto. 1fr solo distribuye el espacio restante tras deducir todos los tracks fijos. Si el contenido de una columna fr se vuelve mayor que el espacio restante, la columna se extiende igualmente — el contenedor puede ensancharse. Fix: minmax(0, 1fr) en lugar de 1fr.
Subgrid necesita un grid padre. grid-template-columns: subgrid sin grid padre definido explícitamente no tiene efecto — y el navegador no avisa de error. Solo cuando un ancestro pone display: grid más tracks explícitos, el item subgrid los toma.
¿Cómo se distingue este generador?
Los generadores online comparables suelen entregar solo CSS puro, una vista previa de breakpoint a la vez y ninguna indicación sobre orden de tab o Subgrid. Este generador pone cinco acentos:
- Subgrid first-class — la mayoría de los generadores ignoran la función por completo. Aquí es un toggle por item.
- Container Queries opt-in — ninguno de los competidores probados emite bloques
@container. En el nuestro, el grid reacciona a elección al viewport O al ancho del contenedor. - Tres viewports en paralelo — otras herramientas muestran un breakpoint a la vez; aquí ve móvil, tableta y escritorio simultáneamente.
- Arbitrary values Tailwind v4 — otras herramientas siguen escribiendo
grid-cols-12. Nosotros emitimosgrid-cols-[200px_1fr_auto]con sintaxis Tailwind v4. - Aviso de orden WCAG — ninguna otra herramienta avisa de drift de orden de tab, aunque WCAG 2.2 lo exige.
Preguntas frecuentes
¿Qué hace un generador CSS Grid?
El generador construye layouts CSS Grid visualmente. Define columnas y filas vía UI controls, pinta template areas en una matriz de celdas, asigna items con grid-area y ve el resultado en vivo en tres viewports en paralelo — móvil, tableta y escritorio. La salida viene como CSS puro, Tailwind v4, SCSS o HTML.
¿Cómo funciona CSS Subgrid?
Subgrid se define vía grid-template-columns: subgrid o grid-template-rows: subgrid en un grid item. El item toma entonces los tracks de su grid padre en lugar de definir los propios. Caso de uso clásico: las cabeceras y pies de tarjetas se alinean en una línea común, sin sincronización de altura en JavaScript. Soportado desde Chrome 117, Safari 16 y Firefox 71.
¿Cuál es la diferencia entre Container Queries y Media Queries?
Las Media Queries reaccionan a tamaños de viewport, las Container Queries al tamaño de un contenedor padre dado. Un bloque @container (min-width: 480px) se dispara cuando el contenedor, no la ventana del navegador, mide al menos 480 px de ancho. Eso hace los componentes realmente reutilizables — un componente Card se adapta esté en la sidebar o en el área principal. Requiere container-type: inline-size en el elemento padre.
¿Cuándo se toma CSS Grid en lugar de Flexbox?
Grid es bidimensional y planifica filas Y columnas simultáneamente — ideal para layouts de página, estructuras de revista, rejillas de tarjetas y shells de dashboard. Flexbox es unidimensional y empuja items a lo largo de un eje — perfecto para barras de navegación, toolbars o listas verticales. En la práctica se combinan ambos: Grid para el esqueleto exterior, Flexbox para los componentes interiores.
¿Qué son las grid-template-areas?
grid-template-areas es una notación visual para layouts CSS Grid: describe la disposición vía nombres de región en cadenas de caracteres, por ej. "header header" "sidebar main" "footer footer". Los items con grid-area: header aterrizan automáticamente ahí. Ventaja: el layout es inmediatamente legible en el stylesheet, sin contar líneas de columna.
¿Cómo escribir CSS Grid como clases Tailwind v4?
Tailwind v4 permite arbitrary values para todas las propiedades Grid. grid-cols-[200px_1fr_auto] sustituye la escala rígida grid-cols-12. Las template areas pasan por [grid-template-areas:'header_header''sidebar_main''footer_footer'] — guiones bajos entre celdas, comillas simples por fila. Subgrid recibe grid-cols-subgrid y grid-rows-subgrid como utility classes nativas.
¿Qué muestra el aviso de orden?
El criterio de éxito WCAG 2.2 1.3.2 exige que el orden de lectura/tab corresponda al orden visual. Si coloca items con order o grid-area de modo que aparezcan visualmente antes de un hermano declarado antes en el DOM, el foco de tab para usuarios de teclado y lector de pantalla salta igualmente en el orden DOM — el layout se siente al revés. El generador marca esos drifts inline.
¿La herramienta guarda mis layouts?
No. Todos los ajustes residen exclusivamente en la pestaña del navegador — sin servidor, sin cuenta, sin cookies. Al recargar, el editor arranca con los tracks por defecto. Para conservar un layout, copie la salida de código en su propio stylesheet.
¿Qué herramientas CSS están relacionadas?
Otras herramientas para CSS-authoring visual:
- Playground Flexbox — layouts Flex unidimensionales con overlay de ejes y overrides por item.
- Constructor de animación CSS — animaciones de keyframes con fallback Reduced Motion y export Tailwind v4.
- Generador Box-Shadow — sombras multicapa con presets Material 3 Elevation.
- Generador de gradiente CSS — degradados lineales, radiales y cónicos con OKLCH.
Última actualización: