El generador de CSS Grid es una herramienta online gratuita que diseña layouts de cuadrícula visualmente.
¿Cómo usar Generador CSS Grid?
Establece el número de filas y columnas.
Arrastra celdas para fusionar áreas o ajustar la ubicación.
Copia el código CSS Grid generado y úsalo en tu proyecto.
Preguntas frecuentes sobre Generador CSS Grid
¿Cuál es la diferencia entre CSS Grid y Flexbox?
CSS Grid es para layouts 2D (filas + columnas), mientras que Flexbox es para 1D (fila o columna). Grid es mejor para layouts de página complejos.
¿Qué es la unidad fr?
fr (fraction) es una unidad proporcional usada en CSS Grid. Por ejemplo, 1fr 2fr divide el espacio en proporción 1:2. Muy útil para layouts responsivos.
¿Puedo montar una cuadrícula adaptable sin media queries?
Sí. Escribiendo repeat(auto-fit, minmax(240px, 1fr)) fijas solo el ancho mínimo de columna y dejas que el navegador calcule el resto: las columnas se añaden al crecer la ventana y se quitan al encogerse, cubriendo de móvil a escritorio sin un solo punto de ruptura. Ojo: auto-fill deja pistas vacías en el espacio sobrante mientras que auto-fit estira las existentes para llenarlo, así que difieren cuando hay pocos elementos.
Una palabra larga estira una columna del grid y rompe la maqueta.
Los elementos de grid tienen un tamaño mínimo automático, así que se niegan a encogerse por debajo de su contenido: una URL larga o una palabra que no se parte abre toda la columna. Poner min-width: 0 en ese elemento permite que el grid vuelva a comprimirlo, y añadir overflow-wrap: anywhere hace que la cadena larga se divida en líneas. Definir la pista como minmax(0, 1fr) en vez de 1fr elimina la causa de raíz, y por eso es tan habitual.
¿Cómo aprovechar Generador CSS Grid al máximo?
repeat(auto-fit, minmax(240px, 1fr)) se reorganiza solo, sin necesidad de media queries.
Usa gap en lugar de márgenes para que la última columna no arrastre espacio sobrante.
En diseños complejos nombra las zonas con grid-template-areas: se lee mucho mejor meses después.