Introduction
Components
Display a Masonry component
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>
<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>
<Masonry columnWidth={140} gap={16}> {photos.slice(0, 20).map(({ src }, idx) => ( <Masonry.Image key={idx} src={src} inferSize /> ))} </Masonry>
<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>