Restart script

React Masonry

Different heights

import { Masonry } from 'react-masonry'

import { pick, randomColor } from './random'

export default function DifferentHeights() {

const numberOfBoxes = 16

return (

{Array.from({ length: numberOfBoxes }).map((_, index) => (

<div

key={index}

style={{

width: '25%',

height: pick([100, 130, 180, 200, 260, 80]),

backgroundColor: randomColor(),

}}

{index}

</div>

))}

</Masonry>

)

}

Open Sandbox

Different widths

import type { CSSProperties } from 'react'

import { Masonry } from 'react-masonry'

import { pick, randomColor } from './random'

export default function DifferentHeights() {

const height = 160

const boxes: CSSProperties[] = [

{ width: '20%', background: randomColor(), height },

{ width: '30%', background: randomColor(), height },

{ width: '50%', background: randomColor(), height },

// second row

{ width: '30%', background: randomColor(), height },

{ width: '40%', background: randomColor(), height },

{ width: '30%', background: randomColor(), height },

// third row

{ width: '30%', background: randomColor(), height },

{ width: '40%', background: randomColor(), height },

// forth

{ width: '25%', background: randomColor(), height },

]

return (

{boxes.map((box, index) => (

<div style={box}>{index}</div>

))}

</Masonry>

)

}

Open Sandbox

Different widths and heights

import type { CSSProperties } from 'react'
import { Masonry } from 'react-masonry'
import { pick, randomColor } from './random'

export default function DifferentHeights() {
  const boxes: CSSProperties[] = [
    {
      width: `20%`,
      height: 100,
      background: randomColor(),
    },
    {
      width: `30%`,
      height: 160,
      background: randomColor(),
    },
    {
      width: `50%`,
      height: 120,
      background: randomColor(),
    },
    {
      width: `20%`,
      height: 60,
      background: randomColor(),
    },
    {
      width: `35%`,
      height: 130,
      background: randomColor(),
    },
    {
      width: `15%`,
      height: 100,
      background: randomColor(),
    },
    {
      width: `25%`,
      height: 100,
      background: randomColor(),
    },
    {
      width: `25%`,
      height: 120,
      background: randomColor(),
    },
  ]

  return (
    <Masonry>
      {boxes.map((box, index) => (
        <div style={box}>{index}</div>
      ))}
    </Masonry>
  )
}

Open Sandbox