Skip to content
Paramanu v0.1.0-alpha.0

Masonry

Masonry arranges child elements into columns with varying heights, creating a Pinterest-style layout.

Basic Usage

1
2
3
4
5
6
import { Masonry } from "@paramanu/primitives-react"


export default function App() {
const heights = [120, 200, 160, 80, 240, 100]
return (
  <Masonry columns={3} gap="4">
    {heights.map((h, i) => (
      <div key={i} style={{ background: "#e2e8f0", height: h }}>{i + 1}</div>
    ))}
  </Masonry>
)
}
<div class="pm-masonry pm-masonry--cols-3 pm-masonry--gap-4">
<div style="background: #e2e8f0; height: 120px;">1</div>
<div style="background: #e2e8f0; height: 200px;">2</div>
<div style="background: #e2e8f0; height: 160px;">3</div>
<div style="background: #e2e8f0; height: 80px;">4</div>
<div style="background: #e2e8f0; height: 240px;">5</div>
<div style="background: #e2e8f0; height: 100px;">6</div>
</div>