# Masonry flow

https://fieldbook.lizardi.mx/es/components/masonry-flow

Categoría: Composición
![Imagen fija del componente Masonry flow de Fieldbook, de la categoría Composición.](https://fieldbook.lizardi.mx/thumbs/masonry-flow.webp)
Preview video: https://ejpqcxcjbiyabxkx.public.blob.vercel-storage.com/previews/masonry-flow-1fc8cdb7fa.mp4 (5 s, silent)

Masonry flow: Un muro de mampostería que empaqueta azulejos de diferentes alturas en columnas, levanta cada uno a medida que se desplaza a la vista y vuelve a asentar toda la cuadrícula cuando cambia el número de columnas.

## Frameworks

react, vue, svelte, astro, html

## Controles de la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

| Nombre | Tipo | Valor inicial | Opciones o restricciones |
| --- | --- | --- | --- |
| columns | number | 3 | De 2 a 5; paso 1 |
| gap | number | 12 | De 4 a 24; paso 1 |

## Notas de uso

Masonry flow se presenta con el formato de vista previa «ancho» y el tema «oscuro».

### ¿Para qué frameworks está disponible Masonry flow?

Masonry flow está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

### ¿Qué dependencias tiene Masonry flow?

Los metadatos de React indican estas dependencias npm además de React: motion, clsx, tailwind-merge.

### ¿Qué detalles de accesibilidad se observan en Masonry flow?

El código React de Masonry flow incluye: atributos y manejadores (aria-hidden, aria-label, tabIndex); roles explícitos (region). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

### ¿Cómo maneja Masonry flow el movimiento reducido?

Masonry flow consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Expresiones de index.tsx que dependen de la preferencia: settled && !reduce ? REFLOW : \{ duration: 0 \}; transition: reduce ? "none" : \`opacity 600ms $\{EASE\} $\{s.delay\}s, transform 680ms $\{EASE\} $\{s.delay\}s\`. Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

## Instalación mediante MCP

Conecta tu cliente, llama a get_component para obtener la implementación y después a get_install_command para consultar las instrucciones. Elige un framework de la lista, integra el código y verifica su funcionamiento en tu aplicación.

```json
{
  "tool": "get_component",
  "arguments": {
    "slug": "masonry-flow",
    "framework": "react"
  }
}
```

[Para agentes](https://fieldbook.lizardi.mx/es/docs/agents)
[MCP](https://fieldbook.lizardi.mx/api/mcp)

## Componentes abiertos relacionados

- [Focus scroll list](https://fieldbook.lizardi.mx/es/components/focus-scroll-list)
- [Settling photo masonry](https://fieldbook.lizardi.mx/es/components/settling-photo-masonry)
- [Curved Scroll Wall](https://fieldbook.lizardi.mx/es/components/curved-scroll-wall)
- [Drag split panels](https://fieldbook.lizardi.mx/es/components/drag-split-panels)
- [Masked reveal disclosure](https://fieldbook.lizardi.mx/es/components/masked-reveal-disclosure)
- [Overlay scroll panel](https://fieldbook.lizardi.mx/es/components/overlay-scroll-panel)