# XWUILayoutMasonry

A Pinterest-style masonry grid that packs variable-height children into balanced columns. It is a thin, config-only wrapper over XWUILayoutFlow (`placementStrategy: balanced`) exposing a MUI-Masonry-shaped API: `columns`/`cols` for a fixed column count, `columnWidth` for auto-fit columns, and `spacing`/`gap` for the gutter. Set `sequential: true` for row-major grid order instead of shortest-column packing. Children may be passed via `data.children` or as nested light-DOM markup (`preservesChildren`).

## Usage

```ts
import { XWUILayoutMasonry } from './XWUILayoutMasonry';

const masonry = new XWUILayoutMasonry(
  container,
  { children: tileElements },
  { cols: 4, gap: 16, responsive: true }
);
```

## Three-column masonry

Nine varied-height tiles packed into three balanced columns, the classic Pinterest masonry layout.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Three-column masonry
description: Nine varied-height tiles packed into three balanced columns, the classic Pinterest masonry layout.
```

## Responsive columns

Ten tiles whose column count is computed automatically from a 180px target width as the container resizes.

```example
file: examples/ResponsiveColumns.ts
html: examples/ResponsiveColumns.html
title: Responsive columns
description: Ten tiles whose column count is computed automatically from a 180px target width as the container resizes.
```

## Sequential grid

Eight tiles filled in row-major (left-to-right, top-to-bottom) order rather than shortest-column packing.

```example
file: examples/SequentialGrid.ts
html: examples/SequentialGrid.html
title: Sequential grid
description: Eight tiles filled in row-major (left-to-right, top-to-bottom) order rather than shortest-column packing.
```

```api
```