> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/masonry.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# Masonry

Arrange cards and images of varying heights.

## Basic usage


### Idea 1

Cards of different heights

### Idea 2

Cards of different heights

### Idea 3

Cards of different heights

### Idea 4

Cards of different heights

### Idea 5

Cards of different heights

### Idea 6

Cards of different heights

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/masonry/basic.tsx"
import { Card, Masonry } from '@ifhover/leaf-ui';

export function MasonryBasic() {
  return (
    <Masonry columns={{ xs: 1, sm: 2, lg: 3 }} gap={16}>
      {[100, 160, 120, 180, 110, 140].map((height, index) => (
        <Card key={height} title={`Idea ${index + 1}`}>
          <div style={{ height }}>Cards of different heights</div>
        </Card>
      ))}
    </Masonry>
  );
}
```

Expand code

## More examples


![Landscape 1](/leaf-ui/media/landscape-1.svg)

![Landscape 2](/leaf-ui/media/landscape-2.svg)

![Landscape 3](/leaf-ui/media/landscape-3.svg)

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/masonry/advanced.tsx"
import { Image, Masonry } from '@ifhover/leaf-ui';

import { withBase } from '@rspress/core/runtime';

export function MasonryImages() {
  return (
    <Masonry columns={{ xs: 1, sm: 2 }}>
      {[1, 2, 3].map((index) => (
        <Image
          key={index}
          src={withBase(`/media/landscape-${index}.svg`)}
          alt={`Landscape ${index}`}
          width="100%"
          height={index === 2 ? 220 : 150}
        />
      ))}
    </Masonry>
  );
}
```

Expand code

## Usage

Flows down each column. Use Grid when row order matters for reading or focus.

## Types

Import these types for data, callbacks and refs.

```ts
import type { MasonryProps } from '@ifhover/leaf-ui';
```

## MasonryProps API

| Property  | Type                                                                      | Default                   | Description                                           |
| --------- | ------------------------------------------------------------------------- | ------------------------- | ----------------------------------------------------- |
| `columns` | `number \| Partial<Record<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl', number>>` | `{ xs: 1, sm: 2, lg: 3 }` | Columns; unspecified breakpoints inherit smaller ones |
| `gap`     | `number \| string`                                                        | `16`                      | Gap; tuples use \[vertical, horizontal]               |