¿Qué es el Generador de CSS Grid?
El Generador de CSS Grid es una herramienta visual para construir layouts con CSS Grid sin escribir el código a mano. Diseñas tu layout sobre un lienzo de grid interactivo y el CSS y HTML correspondientes se actualizan en tiempo real, listos para copiar a tu proyecto.
Todo vive en un solo panel: columnas, filas, gaps, alineación y áreas de plantilla con nombre. Empieza desde una plantilla probada o desde el grid 3×3 predeterminado, pinta regiones con un clic o arrastre y lee código limpio y conforme a los estándares mientras avanzas — sin tener que memorizar la sintaxis del grid.
¿Para quién es?
Es ideal para cualquiera que trabaje con layouts:
- Desarrolladores web que prototipan layouts con grid rápidamente
- Diseñadores que convierten ideas de layout en código CSS real
- Estudiantes que aprenden cómo encajan las propiedades de CSS Grid
- Cualquiera que quiera código de grid ordenado sin escribirlo desde cero
Cómo usar el Generador de CSS Grid
Elige un punto de partida
Selecciona una de las cinco Plantillas — Holy Grail, Barra lateral, Panel, Galería o Encabezado-Pie — o empieza desde el grid 3×3 predeterminado. Cada plantilla configura al instante columnas, filas y áreas de plantilla.
Configura la estructura del grid
En Configuración del grid, usa + y − para agregar o quitar columnas y filas (de 1 a 12). Edita cada valor de pista directamente — escribe 1fr, 200px, auto o cualquier valor CSS válido — y define el gap de fila y el gap de columna de forma independiente.
Pinta las áreas de plantilla
Selecciona un área de la lista (o usa Agregar área para crear una) y luego haz clic o arrastra sobre las celdas de la vista previa para asignarlas. Vuelve a hacer clic en una celda pintada con la misma área seleccionada para borrarla. Cada área recibe su propio color, así el layout es fácil de leer.
Ajusta la alineación
Afina la posición en la sección Alineación usando justify-items, align-items, justify-content y align-content. En el código generado solo aparecen los valores distintos del predeterminado.
Copia el código
Cambia entre las pestañas CSS y HTML para ver el resultado generado y luego pulsa Copiar para enviar el código visible a tu portapapeles.
Funciones
Lienzo visual del grid
Una vista previa interactiva refleja tus anchos de columna, alturas de fila y gaps exactos. Haz clic y arrastra las celdas para definir regiones con nombre.
Cinco plantillas predefinidas
Empieza rápido con Holy Grail, Barra lateral, Panel, Galería o Encabezado-Pie — cada una preconfigura las pistas y las áreas de plantilla.
Valores de pista flexibles
Cada columna y fila acepta cualquier valor CSS: unidades fr, px, auto, porcentajes o minmax().
Controles de gap independientes
Define el gap de fila y el gap de columna por separado en píxeles, con el lienzo actualizándose en vivo a medida que los cambias.
Áreas de plantilla con nombre
Pinta celdas para construir regiones con código de color, y luego agrega o quita áreas de forma dinámica. La herramienta escribe el CSS grid-template-areas correcto.
Opciones completas de alineación
Configura las cuatro propiedades de alineación con grupos de botones; los valores predeterminados se omiten automáticamente del resultado.
Código CSS y HTML limpio
Obtén un .grid-container listo para usar con las clases de área correspondientes, además de la estructura de marcado HTML en la pestaña HTML.
Copia con un clic
Copia el CSS o HTML visible a tu portapapeles con un solo botón, listo para pegar directamente en tu proyecto.
Pintado táctil
El lienzo funciona en teléfonos y tablets — toca y arrastra para asignar áreas en una pantalla táctil.
Modo oscuro
Los colores, los bordes y el bloque de código se adaptan automáticamente para un uso cómodo con cualquier iluminación.
Preguntas frecuentes
¿Qué valores de pista puedo usar?
Cualquier valor de pista válido de CSS Grid: 1fr, 200px, auto, 50%, min-content, max-content o funciones como minmax(200px, 1fr) y repeat(3, 1fr). Los campos de pista son texto libre, así que puedes combinar unidades entre columnas y filas.
¿Cómo funcionan las áreas de plantilla?
Las áreas de plantilla asignan nombres a las regiones del grid. Selecciona un área de la lista y luego haz clic o arrastra sobre las celdas del lienzo para pintarlas. El generador escribe la propiedad grid-template-areas junto con una clase correspondiente para cada área, de modo que el marcado y el CSS coinciden.
¿Puedo dejar celdas sin área?
Sí. Las celdas sin pintar aparecen como un punto (.) en el valor de grid-template-areas generado, que es la sintaxis válida de CSS Grid para una celda vacía.
¿Por qué no aparecen las propiedades de alineación en el CSS?
El generador solo incluye los valores de alineación distintos del predeterminado para mantener el código limpio. justify-items: stretch y align-items: stretch son los predeterminados de CSS Grid, al igual que justify-content: start y align-content: start, por eso se omiten. Cambia cualquiera de ellos a un valor diferente y aparecerá en el resultado.
¿Cuál es el tamaño máximo del grid?
Puedes construir grids de hasta 12 columnas × 12 filas (144 celdas), lo que cubre la inmensa mayoría de los layouts del mundo real.
¿Cuál es la diferencia entre CSS Grid y Flexbox?
CSS Grid es un sistema bidimensional: controlas columnas y filas al mismo tiempo, lo que es ideal para layouts de página completa y regiones con nombre. Flexbox es unidimensional, distribuyendo los elementos a lo largo de una sola fila o columna. Esta herramienta se centra en Grid; recurre a Flexbox cuando solo necesites distribuir elementos a lo largo de un eje.
¿Funciona en el móvil?
Sí. El layout se adapta a las pantallas más pequeñas y el lienzo admite pintado táctil — toca y arrastra para asignar áreas en teléfonos y tablets.
¿Se almacenan mis datos en algún lugar?
No. Todo se ejecuta en tu navegador y no se envía ninguna configuración del grid ni código generado a ningún servidor.
Aún no hay comentarios. ¡Sé el primero en comentar!