⭐ 0
🔍
Texto Imagen PDF y Docs Audio Música Electrónica Tiempo Utilidades Validadores Esoterismo Juegos

Generador de CSS Grid

Diseña layouts de CSS Grid visualmente: define las columnas, filas y el espacio, luego escribe nombres de área en las celdas para construir grid-template-areas — con vista previa en vivo y CSS y HTML listos para copiar.

🔒 Procesado íntegramente en su navegador: nada de lo que ingresa aquí se carga nunca.

Escribe un nombre en cualquier celda de abajo; las celdas con el mismo nombre se fusionan en una región de grid-template-areas.

Procesando... 0%

Resultado

Una declaración grid-template-areas es una de las piezas de CSS más legibles que existen, pero solo una vez que ya está escrita — llegar a ella a mano significa contar cadenas entrecomilladas y hacer coincidir longitudes de fila, y una sola celda mal puesta rompe silenciosamente todo el layout. Este generador convierte eso en manipulación directa: define las cantidades de columnas y filas, escribe un nombre en cualquier celda de la cuadrícula en vivo y los nombres coincidentes se fusionan automáticamente en una región nombrada.

Por dentro, cada celda que dejas en blanco se convierte en un punto en la cadena grid-template-areas generada, y cada celda que nombras se convierte en parte del rectángulo de ese nombre. CSS solo permite que una región nombrada ocupe un único bloque rectangular limpio, así que la herramienta lo verifica mientras escribes y te dice exactamente cuándo un nombre aún no forma un rectángulo válido — en lugar de producir silenciosamente CSS que el navegador rechazará.

El espacio entre columnas y entre filas vienen por defecto en 8px y se combinan en una sola línea gap cuando coinciden, y la vista previa en vivo de la cuadrícula siempre refleja tus pistas de grid-template-columns y grid-template-rows, incluyendo columnas fijas en píxeles de un preajuste como los carriles laterales de 200px del santo grial. La salida copiable cubre ambos lados: un bloque de CSS listo para tu hoja de estilos y un esqueleto HTML correspondiente con un div grid-area por cada región nombrada.

Grid y flexbox resuelven problemas de layout diferentes, y el css-flexbox-generator de este sitio es el mejor punto de partida para layouts unidimensionales — una sola fila o columna de elementos flexibles como una barra de navegación o una pila de tarjetas. Recurre a este generador de grid cuando necesites control bidimensional, filas y columnas explícitas, o regiones nombradas como cabecera/navegación/principal/pie; las dos herramientas suelen acabar en la misma página, grid para la estructura de la página y flexbox dentro de sus piezas. Como todas las herramientas de este sitio, funciona completamente en tu navegador — sin subida de datos, sin cuenta.

¿Te gusta esta herramienta? ¿Crees que este producto es útil? ¿Ves potencial en él y quieres apoyarlo?

🛡️
Ejecutado en el navegador

Tus archivos y datos nunca salen de este dispositivo. El procesamiento se ejecuta completamente sin conexión. 100% seguro.

Formatos aceptados y reglas

  • Controles numéricos de 1 a 6 columnas y filas, más controles independientes de espacio entre columnas y entre filas que se combinan en un solo valor gap cuando coinciden.
  • Modo de áreas nombradas: escribe el nombre de un área directamente en cualquier celda de la cuadrícula en vivo; la herramienta construye una cadena grid-template-areas válida y avisa cuando los nombres no forman rectángulos limpios.
  • Bloque de CSS copiable (display: grid, grid-template-columns/rows, gap, grid-template-areas) más un esqueleto HTML con un div grid-area por cada región nombrada.

Beneficios clave

✓ Escribe un nombre en cualquier celda y las celdas con el mismo nombre se fusionan en una sola región grid-template-areas — sin arrastrar ni adivinar la sintaxis de texto con comillas.
✓ La vista previa redimensiona y recolorea la cuadrícula con cada cambio, para que veas las pistas de columna y fila exactas y cada región nombrada antes de copiar una sola línea de CSS.
✓ Preajustes como el clásico layout del santo grial y una barra lateral estrecha te dan una declaración grid-template-areas real y funcional para empezar, en vez de una cuadrícula vacía.

Casos de uso

  • • Construye la clásica estructura de página "santo grial" — cabecera y pie de página a ancho completo con una fila central de navegación, contenido y barra lateral — escribiendo nombres de área en lugar de teclear grid-template-areas a mano.
  • • Diseña una página de ajustes o un panel de administración con una barra lateral de ancho fijo junto a una columna de contenido flexible y copia el CSS y HTML exactos cuando la vista previa en vivo se vea bien.
  • • Comprueba que un conjunto de áreas con nombre forme realmente rectángulos válidos antes de publicar: la herramienta señala los nombres exactos que romperían grid-template-areas en el navegador.