Masonry

Masonry is a grid layout that allows varying image dimensions with equal spacing. Unlike common grids, the rows are not confined to fixed heights. Simpler implementations of this layout like the CSS multi-column layout flows on a column-by-column basis. However, this has a sinistrodextral flow (left-to-right) by rows. The name masonry stems from the similarity of the layout to mason fitting stones.

Usage

import Masonry from '@ui-pack/react/masonry'


function App(){
  const items = [
    'm/200/120',
    'a/200/170',
    's/220/150',
    'o/180/90',
    'n/200/230',
    'r/250/200',
    'y/260/220',
  ]
  return (
    <Masonry columns="3" gap="10px">
      {items.map(item => (
        <Image key={item} src={`https://picsum.photos/seed/${item}`} alt="" />
      ))}
    </Masonry>
  )
}function App(){
  const items = [
    'm/200/120',
    'a/200/170',
    's/220/150',
    'o/180/90',
    'n/200/230',
    'r/250/200',
    'y/260/220',
  ]
  return (
    <Masonry columns="3" gap="10px">
      {items.map(item => (
        <Image key={item} src={`https://picsum.photos/seed/${item}`} alt="" />
      ))}
    </Masonry>
  )
}