Masonry

Layout masonry estilo Pinterest para exibir itens com alturas variadas em uma grade organizada.

Importação

import { Masonry } from 'asterui'

Exemplos

Itens Dinâmicos

Adicione e remova itens dinamicamente. Novos itens são colocados na coluna mais curta.

</>

Add Item

×Item 1

×Item 2

×Item 3

import { Masonry, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const COLORS = ['#0092ff', '#00d084', '#ff6b6b', '#ffd93d', '#a29bfe', '#fd79a8']
  const HEIGHTS = [100, 120, 140, 160, 180, 200]
  
  interface Item { id: number; color: string; height: number }
  
  const [items, setItems] = useState<Item[]>([
    { id: 1, color: COLORS[0], height: 120 },
    { id: 2, color: COLORS[1], height: 180 },
    { id: 3, color: COLORS[2], height: 140 },
  ])
  const [nextId, setNextId] = useState(4)
  
  const addItem = () => {
    setItems([...items, {
      id: nextId,
      color: COLORS[Math.floor(Math.random() * COLORS.length)],
      height: HEIGHTS[Math.floor(Math.random() * HEIGHTS.length)],
    }])
    setNextId(nextId + 1)
  }
  
  const removeItem = (id: number) => setItems(items.filter(item => item.id !== id))
  
  return (
      <div>
        <div className="mb-4">
          <Button color="primary" onClick={addItem}>Add Item</Button>
        </div>
        <Masonry columns={3} gap={16}>
          {items.map(item => (
            <div
              key={item.id}
              className="relative rounded-lg"
              style={{ background: item.color, padding: '16px', color: 'white', height: item.height }}
            >
              <Button
                variant="ghost"
                size="sm"
                shape="circle"
                className="absolute top-1 right-1 min-h-0 h-6 w-6 text-white hover:bg-black/20"
                onClick={() => removeItem(item.id)}
              >
                ×
              </Button>
              Item {item.id}
            </div>
          ))}
        </Masonry>
      </div>
    )
}

export default App

Masonry Básico

Grade masonry simples com itens de altura variada.

</>

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

import { Masonry } from 'asterui'

function App() {
  return (
      <Masonry columns={3} gap={16}>
        <div style={{ background: '#0092ff', padding: '16px', color: 'white', height: '120px' }}>
          Item 1
        </div>
        <div style={{ background: '#00d084', padding: '16px', color: 'white', height: '180px' }}>
          Item 2
        </div>
        <div style={{ background: '#ff6b6b', padding: '16px', color: 'white', height: '140px' }}>
          Item 3
        </div>
        <div style={{ background: '#ffd93d', padding: '16px', color: 'white', height: '200px' }}>
          Item 4
        </div>
        <div style={{ background: '#a29bfe', padding: '16px', color: 'white', height: '160px' }}>
          Item 5
        </div>
        <div style={{ background: '#fd79a8', padding: '16px', color: 'white', height: '130px' }}>
          Item 6
        </div>
      </Masonry>
    )
}

export default App

Colunas Responsivas

Contagem de colunas responsiva em diferentes breakpoints.

</>

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

import { Masonry } from 'asterui'

function App() {
  return (
      <Masonry columns={{ xs: 1, sm: 2, md: 3, lg: 4 }} gap={16}>
        <div style={{ background: '#0092ff', padding: '16px', color: 'white', height: '120px' }}>
          Item 1
        </div>
        <div style={{ background: '#00d084', padding: '16px', color: 'white', height: '180px' }}>
          Item 2
        </div>
        <div style={{ background: '#ff6b6b', padding: '16px', color: 'white', height: '140px' }}>
          Item 3
        </div>
        <div style={{ background: '#ffd93d', padding: '16px', color: 'white', height: '200px' }}>
          Item 4
        </div>
        <div style={{ background: '#a29bfe', padding: '16px', color: 'white', height: '160px' }}>
          Item 5
        </div>
        <div style={{ background: '#fd79a8', padding: '16px', color: 'white', height: '130px' }}>
          Item 6
        </div>
        <div style={{ background: '#74b9ff', padding: '16px', color: 'white', height: '150px' }}>
          Item 7
        </div>
        <div style={{ background: '#fab1a0', padding: '16px', color: 'white', height: '170px' }}>
          Item 8
        </div>
      </Masonry>
    )
}

export default App

Gap Personalizado

Diferentes tamanhos de gap entre itens.

</>

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

import { Masonry } from 'asterui'

function App() {
  return (
      <Masonry columns={3} gap={32}>
        <div style={{ background: '#0092ff', padding: '16px', color: 'white', height: '120px' }}>
          Item 1
        </div>
        <div style={{ background: '#00d084', padding: '16px', color: 'white', height: '180px' }}>
          Item 2
        </div>
        <div style={{ background: '#ff6b6b', padding: '16px', color: 'white', height: '140px' }}>
          Item 3
        </div>
        <div style={{ background: '#ffd93d', padding: '16px', color: 'white', height: '200px' }}>
          Item 4
        </div>
        <div style={{ background: '#a29bfe', padding: '16px', color: 'white', height: '160px' }}>
          Item 5
        </div>
        <div style={{ background: '#fd79a8', padding: '16px', color: 'white', height: '130px' }}>
          Item 6
        </div>
      </Masonry>
    )
}

export default App

API

Masonry

Propriedade	Descrição	Tipo	Padrão
columns	Número de colunas ou configuração de colunas responsivas	number | { xs?: number, sm?: number, md?: number, lg?: number, xl?: number, '2xl'?: number }	3
gap	Espaçamento entre itens em pixels	number	16
children	Itens para exibir em layout masonry	React.ReactNode	-
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Notas de Uso

• O componente Masonry cria um layout estilo Pinterest onde os itens são organizados em colunas
• Itens fluem para a coluna mais curta para criar um layout balanceado
• Use a prop columns para definir um número fixo de colunas ou torná-la responsiva
• A prop gap controla o espaçamento entre itens em pixels
• Breakpoints responsivos: xs (<640px), sm (≥640px), md (≥768px), lg (≥1024px), xl (≥1280px), 2xl (≥1536px)
• Itens podem ter alturas variadas - o layout irá distribuí-los automaticamente de forma eficiente
• Ótimo para galerias de imagens, grades de produtos e cards de conteúdo