Generador de Grid CSS

Cómo funciona el Generador de Grid CSS

El Generador de Grid CSS es una herramienta visual diseñada para facilitar la creación de estructuras de cuadrícula personalizadas. Permite definir de forma interactiva la distribución de las columnas y las filas, ajustar sus dimensiones y establecer los espacios de separación entre ellas. Una vez configurada la estructura, es posible arrastrar el cursor sobre las celdas para posicionar elementos individuales dentro del diseño.

A partir de la configuración visual que realices, la herramienta genera de manera automática el código CSS y HTML correspondiente, listo para que lo copies y lo pegues directamente en tu proyecto web.

Configuración de entrada y parámetros de la cuadrícula

Para diseñar tu cuadrícula, dispones de una serie de controles de entrada que definen la estructura base del contenedor y la disposición de sus elementos:

• Columnas (Columnas): Permite establecer un número de columnas para la cuadrícula, con un límite de entre 1 y 12.
• Filas (Filas): Permite definir el número de filas, también con un rango de entre 1 y 12.
• Espacio columnas: Controla la separación entre las columnas mediante un valor numérico comprendido entre 0 y 48px.
• Espacio filas Espacio filas: Controla la separación entre las filas, admitiendo un valor numérico de entre 0 y 48px.
• Tamaño de columnas: Permite especificar el tamaño de cada columna individualmente introduciendo cualquier valor de cuadrícula CSS válido, como por ejemplo 1fr, 200px, auto, min-content o minmax(120px, 1fr).
• Tamaño de filas: Permite definir el tamaño de cada fila utilizando cualquier valor de cuadrícula CSS válido, tales como 1fr, 200px, auto, min-content o minmax(120px, 1fr).
• Colocación de elementos: Se realiza de forma interactiva arrastrando el cursor a través de las celdas para delimitar un área rectangular específica.

Código generado y resultados de salida

La herramienta procesa tus interacciones y ofrece dos tipos de resultados listos para su uso:

• CSS: Genera el código CSS necesario para el contenedor de la cuadrícula (grid container) y las reglas de posicionamiento específicas para cada uno de los elementos que hayas colocado.
• HTML: Proporciona el código HTML estructurado, que incluye el contenedor principal de la cuadrícula y los elementos div correspondientes a cada uno de los elementos posicionados en el diseño.

Reglas de comportamiento y casos especiales

El generador cuenta con una serie de reglas lógicas y comportamientos automáticos para asegurar que el código resultante sea limpio y funcional:

• Creación de elementos: Al arrastrar el cursor sobre las celdas y soltar el botón del ratón, se crea un elemento hijo posicionado que abarca las columnas y filas seleccionadas.
• Reglas individuales: Cada elemento que dibujes en la cuadrícula recibe su propia regla grid-column y grid-row en el código CSS generado, así como un elemento div equivalente en el código HTML.
• Solapamiento de elementos: Los elementos pueden solaparse entre sí dentro de la cuadrícula. En caso de solapamiento, el elemento que se haya dibujado más tarde se posicionará visualmente encima del anterior.
• Eliminación de elementos: Cada elemento cuenta con un botón "×" que, al ser pulsado, lo elimina de la cuadrícula.
• Casillas de tamaño individuales: Cada pista (ya sea columna o fila) dispone de su propia casilla de entrada de texto para que puedas escribir el valor de tamaño que desees.
• Optimización con repeat(): Si varias pistas consecutivas comparten exactamente el mismo tamaño, la herramienta optimiza el código CSS de salida agrupándolas automáticamente bajo la función repeat().
• Fusión de espacios (gaps): Aunque el espacio entre columnas y el espacio entre filas se configuran de manera independiente, el código CSS resultante los unifica en una única propiedad gap simplificada cuando ambos valores coinciden.
• Límite de elementos: La herramienta admite la creación de un máximo de 16 elementos en total dentro de una misma cuadrícula.
• Gestión de valores no válidos: Si introduces un valor no válido en la casilla de tamaño de una pista (como por ejemplo not-a-grid-track), el campo de entrada se marcará visualmente como no válido, pero el código CSS generado mantendrá el último valor válido que se haya registrado.
• Acciones de elementos: El botón "Vaciar elementos" limpia por completo el diseño, lo que da como resultado un contenedor HTML vacío y un contador de 0 elementos. Por otro lado, la opción "Añadir elemento" genera un nuevo elemento HTML en la estructura.

Ajustes rápidos y plantillas predefinidas

Para agilizar el proceso de diseño, la herramienta incluye una sección de "Ajustes rápidos" (presets) con estructuras comunes ya configuradas:

• Barra lateral: Configura una estructura clásica con una columna lateral para navegación o contenido secundario.
• Cabecera y pie: Genera una distribución con secciones superior e inferior definidas.
• Galería: Aplica un ajuste predefinido que genera automáticamente 3 columnas, 2 filas y coloca 3 elementos distribuidos en la cuadrícula.
• Panel: Configura una distribución de rejilla idónea para paneles de control y visualización de datos.

Privacidad y procesamiento de datos

Tu privacidad está garantizada durante el uso de la aplicación. Tu cuadrícula se construye directamente en tu propio navegador web. Ninguno de los datos, configuraciones o parámetros que ajustes dentro de la herramienta se sube a BroBroGo.

Preguntas frecuentes

¿Cómo coloco elementos en la cuadrícula?
Mantén pulsado y arrastra sobre las celdas para marcar un rectángulo: al soltar, se convierte en un hijo que abarca esas columnas y filas. Cada elemento que dibujas recibe su propia regla grid-column y grid-row en el CSS y un div correspondiente en el HTML. Los elementos pueden solaparse, y el último dibujado queda encima; usa la × del elemento para quitarlo.

¿Pueden las columnas y filas tener tamaños distintos?
Sí. Cada pista tiene su propia casilla de tamaño, donde puedes escribir cualquier valor de grid: 1fr, 200px, auto, min-content o minmax(120px, 1fr). Las pistas con el mismo tamaño se agrupan en repeat() para que el código quede corto. El espacio entre columnas y entre filas se ajusta por separado y se une en un solo gap cuando coinciden.

¿Qué hago con el código generado?
Copia el CSS y el HTML juntos. El HTML te da el contenedor con un div por elemento, y el CSS define la cuadrícula y coloca cada uno. Pega ambos en tu proyecto y obtendrás el mismo diseño que dibujaste aquí.