Masonry

Display a Masonry component

Anatomy

import { Masonry } from '@onwo/ui';

<Masonry columnWidth={140} gap={16}>
  <Masonry.Image width={150} height={90} src="/image.jpg" />
  <Masonry.Item width={150} height={150} />
  ...
</Masonry>

Default

<Masonry columnWidth={140} gap={16}>
  {photos.slice(0, 20).map(({ src, width, height }, idx) => (
    <Masonry.Image key={idx} src={src} width={width} height={height} />
  ))}
</Masonry>

Images auto sizing

<Masonry columnWidth={140} gap={16}>
  {photos.slice(0, 20).map(({ src }, idx) => (
    <Masonry.Image key={idx} src={src} inferSize />
  ))}
</Masonry>

Boxes

<Masonry columnWidth={140} gap={16}>
  {photos.slice(0, 20).map(({ width, height }, idx) => (
    <Masonry.Item
      class="flex items-center justify-center"
      key={idx}
      width={width}
      height={height}
    >
      <span>{idx}</span>
    </Masonry.Item>
</Masonry>