Masonry

Diseño de mampostería estilo Pinterest para mostrar elementos con alturas variables en una cuadrícula organizada.

Importar

import { Masonry } from 'asterui'

Ejemplos

Elementos Dinámicos

Añade y elimina elementos dinámicamente. Los nuevos elementos se colocan en la columna más corta.

</>

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

Cuadrícula de mampostería simple con elementos de altura variable.

</>

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

Columnas Responsivas

Número de columnas responsivo en diferentes puntos de interrupción.

</>

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 tamaños de espacio entre elementos.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
columns	Número de columnas o configuración de columnas responsivas	number | { xs?: number, sm?: number, md?: number, lg?: number, xl?: number, '2xl'?: number }	3
gap	Espaciado entre elementos en píxeles	number	16
children	Elementos a mostrar en diseño de mampostería	React.ReactNode	-
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Notas de Uso

• El componente Masonry crea un diseño estilo Pinterest donde los elementos se organizan en columnas
• Los elementos fluyen a la columna más corta para crear un diseño equilibrado
• Usa la prop columns para establecer un número fijo de columnas o hacerlo responsivo
• La prop gap controla el espaciado entre elementos en píxeles
• Puntos de interrupción responsivos: xs (<640px), sm (≥640px), md (≥768px), lg (≥1024px), xl (≥1280px), 2xl (≥1536px)
• Los elementos pueden tener alturas variables - el diseño los distribuirá automáticamente de manera eficiente
• Ideal para galerías de imágenes, cuadrículas de productos y tarjetas de contenido