# Generador de layout masonry CSS Genera layouts masonry puros en CSS con breakpoints, espaciado configurable y selectores omitidos > Página canónica: https://elysiatools.com/es/tools/css-masonry-layout-generator - **Categoría:** Development - **Palabras clave:** css, masonry, layout, grid ## Descripción general Introduce columnas, ancho, espaciado y breakpoints, y luego elige entre una implementacion con CSS columns o Flexbox. La herramienta entrega HTML y CSS listos para copiar. Incluye: - estructura HTML base - CSS comentado - resumen de breakpoints y selectores omitidos ## Entradas - **Columnas** (number) - **Ancho del contenedor** (text) - **Espaciado** (text) - **Motor de layout** (select) - **Breakpoints responsive** (textarea): 640:2 960:3 1280:4 - **Elementos omitidos** (textarea): .masonry__item--featured .masonry__hero ## Cuándo usarlo - Cuando necesitas implementar una galería de imágenes estilo Pinterest sin cargar librerías de JavaScript adicionales. - Al diseñar un portafolio o blog responsivo que requiere reorganizar el número de columnas según el tamaño de la pantalla. - Cuando buscas integrar tarjetas de contenido de diferentes alturas manteniendo un flujo visual continuo y ordenado. ## Cómo funciona - Define la estructura básica indicando el número máximo de columnas, el ancho del contenedor y el espaciado (gap) entre los elementos. - Selecciona el motor de layout preferido: CSS Columns para un efecto de cascada clásico o Flexbox para un control de filas más predecible. - Configura los breakpoints responsivos (ej. 640:2, 960:3) y añade selectores de elementos que deban omitir el flujo estándar (como tarjetas destacadas a ancho completo). - Copia el código HTML y CSS generado, el cual incluye comentarios y media queries listos para integrar en tu proyecto. ## Casos de uso - Creación de galerías fotográficas donde las imágenes tienen diferentes proporciones y alturas. - Desarrollo de un feed de noticias o blog donde las tarjetas de artículos se acomodan dinámicamente en múltiples columnas. - Diseño de paneles de control (dashboards) con widgets de tamaños variables que se adaptan a dispositivos móviles y de escritorio. ## Preguntas frecuentes ### ¿Necesito usar JavaScript para que el layout masonry funcione? No, esta herramienta genera código basado exclusivamente en CSS puro (CSS Columns o Flexbox), eliminando la necesidad de scripts externos. ### ¿Cómo configuro los breakpoints responsivos? Debes ingresar una regla por línea con el formato 'ancho:columnas', por ejemplo '768:2' para mostrar dos columnas en pantallas de 768px o superiores. ### ¿Qué significa la opción de elementos omitidos (skip elements)? Permite definir clases CSS, como '.destacado', que romperán el flujo normal de las columnas para ocupar el ancho completo del contenedor. ### ¿Cuál es la diferencia entre CSS Columns y Flexbox en esta herramienta? CSS Columns distribuye el contenido de arriba a abajo en columnas, ideal para el efecto cascada. Flexbox organiza los elementos en filas que envuelven, ofreciendo un orden de lectura de izquierda a derecha. ### ¿Puedo usar unidades relativas para el ancho y el espaciado? Sí, puedes usar cualquier unidad válida de CSS, como porcentajes (100%), rems (1.5rem) o funciones como min(1200px, 100%). ## Herramientas relacionadas - [Sincronizador de paleta Tailwind](https://elysiatools.com/es/tools/tailwind-color-palette-sync): Introduce HEX, elige esquema de nombres (escala 50–950 / nombre único / anidamiento) y genera el fragmento theme.extend.colors de tailwind.config.ts con niveles WCAG AA/AAA por color. Modo oscuro opcional. - [Conversor de cURL a Go (net/http)](https://elysiatools.com/es/tools/curl-to-go): Convierte un comando cURL en un fragmento de código Go net/http con http.NewRequest, cabeceras y cuerpo - [Conversor de cURL a JavaScript (axios)](https://elysiatools.com/es/tools/curl-to-js-axios): Convierte un comando cURL en un fragmento de código JavaScript axios con objeto de configuración, cabeceras y datos - [Conversor de cURL a JavaScript (fetch)](https://elysiatools.com/es/tools/curl-to-js-fetch): Convierte un comando cURL en un fragmento de código JavaScript fetch() con cabeceras, cuerpo y método - [Conversor de cURL a PHP (cURL)](https://elysiatools.com/es/tools/curl-to-php): Convierte un comando cURL en un fragmento de código PHP cURL con curl_setopt, cabeceras y campos POST - [Conversor de cURL a Python (requests)](https://elysiatools.com/es/tools/curl-to-python): Convierte un comando cURL en un fragmento de código Python requests con cabeceras, datos y método - [Acortador de URL](https://elysiatools.com/es/tools/url-shortener): Genera URLs cortas usando servicios reales de acortamiento (is.gd y v.gd) - [Probador de estres de contratos API](https://elysiatools.com/es/tools/api-contract-stress-tester): Genera casos de prueba de valores limite desde OpenAPI 3.x y opcionalmente los envia a un backend real para detectar desviaciones del contrato. ## Ejemplos - [Ejemplos del Framework CSS Bulma](https://elysiatools.com/es/samples/bulma): Ejemplos del framework CSS Bulma incluyendo columnas, componentes, controles de formulario, sistema de diseño y patrones de diseño modernos basados en CSS - [Muestras CSS](https://elysiatools.com/es/samples/css-viewer-samples): Archivos de muestra para el visor CSS en el navegador - [Ejemplos del Framework CSS Milligram](https://elysiatools.com/es/samples/milligram): Ejemplos del framework CSS Milligram incluyendo tipografía, formularios, grids y componentes - [Ejemplos de Tailwind CSS](https://elysiatools.com/es/samples/tailwind-css): Ejemplos de Tailwind CSS - Framework CSS utilitario primero con diseño receptivo, componentes y configuración personalizada ## Contenido relacionado - [Creación de CSS, maquetación y flujo en cascada](https://elysiatools.com/es/hubs/css-authoring-layout-and-cascade-workflows): Crea y revisa CSS con formato, diagnóstico de selectores, fragmentos responsivos, efectos visuales y comprobaciones renderizadas.