Generador CSS Grid - Constructor Visual de Diseño Grid en Línea
Cree diseños CSS Grid visualmente con vista previa en tiempo real. Defina columnas, filas, espaciado, alineación, áreas de cuadrícula y ubicación de elementos — 100% del lado del cliente, sin envío de datos al servidor.
Preguntas Frecuentes
¿Qué es CSS Grid?
CSS Grid Layout es un sistema de diseño CSS bidimensional que permite crear diseños de página complejos definiendo filas y columnas simultáneamente. A diferencia de Flexbox, CSS Grid maneja el diseño horizontal y vertical al mismo tiempo.
¿Cómo uso este generador de CSS Grid?
1. Defina la estructura del grid configurando tamaños de columnas y filas. 2. Configure el espaciado con los controles de gap. 3. Configure propiedades de alineación. 4. Agregue elementos y configure su ubicación. 5. Pruebe las plantillas predefinidas. 6. Copie el código CSS y HTML generado.
¿Mis datos están seguros?
Sí, completamente. Esta herramienta se ejecuta enteramente en su navegador usando JavaScript del lado del cliente. No se envían datos a ningún servidor.
¿Cuál es la diferencia entre CSS Grid y Flexbox?
CSS Grid es bidimensional (filas Y columnas), mientras que Flexbox es unidimensional (fila O columna). Use Grid para diseños de página completos y Flexbox para diseños lineales simples. Son complementarios.
¿Qué son las grid-template-areas?
grid-template-areas permite definir el diseño usando regiones con nombre en lugar de números de línea. Asigne nombres como 'header', 'sidebar', 'main' a las áreas para un CSS más legible.
¿Qué significa la unidad fr?
La unidad fr (fraccional) representa una fracción del espacio libre disponible en el contenedor grid. Por ejemplo, 1fr 2fr 1fr crea tres columnas donde la del medio es el doble de ancha.
¿Cómo funciona grid-auto-flow?
grid-auto-flow controla cómo los elementos se colocan automáticamente. 'row' coloca de izquierda a derecha y de arriba a abajo. 'column' de arriba a abajo y de izquierda a derecha. 'dense' rellena los huecos para un diseño más compacto.
Ejemplos de Código
// CSS Grid Generator - JavaScript Implementation
function formatTrackSize(value, unit) {
if (unit === 'auto') return 'auto';
return `${value}${unit}`;
}
function generateGridCSS(options = {}) {
const {
display = 'grid',
columns = [{ value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }],
rows = [{ value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }],
rowGap = 0,
columnGap = 0,
justifyItems = 'stretch',
alignItems = 'stretch',
justifyContent = 'start',
alignContent = 'start',
gridAutoFlow = 'row',
areas = null,
} = options;
const rules = [`display: ${display}`];
rules.push(`grid-template-columns: ${columns.map(t => formatTrackSize(t.value, t.unit)).join(' ')}`);
rules.push(`grid-template-rows: ${rows.map(t => formatTrackSize(t.value, t.unit)).join(' ')}`);
if (areas && areas.length > 0) {
const areasStr = areas.map(row => `"${row.join(' ')}"`).join('\n ');
rules.push(`grid-template-areas:\n ${areasStr}`);
}
if (rowGap > 0 || columnGap > 0) {
if (rowGap === columnGap) {
rules.push(`gap: ${rowGap}px`);
} else {
rules.push(`gap: ${rowGap}px ${columnGap}px`);
}
}
if (justifyItems !== 'stretch') rules.push(`justify-items: ${justifyItems}`);
if (alignItems !== 'stretch') rules.push(`align-items: ${alignItems}`);
if (justifyContent !== 'start') rules.push(`justify-content: ${justifyContent}`);
if (alignContent !== 'start') rules.push(`align-content: ${alignContent}`);
if (gridAutoFlow !== 'row') rules.push(`grid-auto-flow: ${gridAutoFlow}`);
return rules.map(r => `${r};`).join('\n');
}
// Usage
console.log(generateGridCSS({
columns: [{ value: 1, unit: 'fr' }, { value: 2, unit: 'fr' }, { value: 1, unit: 'fr' }],
rows: [{ value: 100, unit: 'px' }, { value: 1, unit: 'fr' }],
rowGap: 16,
columnGap: 16,
}));
// display: grid;
// grid-template-columns: 1fr 2fr 1fr;
// grid-template-rows: 100px 1fr;
// gap: 16px;