MasonryGrid

This is the <MasonryGrid /> component. Use the direction prop to change the direction of the flow of the grid.

---

Examples

Row

<MasonryGrid rowHeight={200}>
  {[...Array(12)].map((item, i) => (
    <div key={`${i}`}>
      <img
        src={`https://picsum.photos/id/${210 + i}/${
          Math.floor(Math.random() * 2) === 1 ? '400' : '500'
        }/${Math.floor(Math.random() * 2) === 1 ? '300' : '400'}`}
      />
    </div>
  ))}
</MasonryGrid>

Column

<MasonryGrid direction="column">
  {[...Array(12)].map((item, i) => (
    <div key={`${i}`}>
      <img
        src={`https://picsum.photos/id/${210 + i}/${
          Math.floor(Math.random() * 2) === 1 ? '400' : '500'
        }/${Math.floor(Math.random() * 2) === 1 ? '300' : '400'}`}
      />
    </div>
  ))}
</MasonryGrid>

---

Note: <img /> cannot be direct Child of <MasonryGrid />

Basic Usage

import MasonryGrid from '@candy/kitkat/masonry-grid'

export const MyComponent = (itemArray: { src: string }[]) => {
  return (
    <MasonryGrid rowHeight={300}>
      {itemArray.map((item, i) => (
        <div key={`${i}`}>
          <img src={item.src} />
        </div>
      ))}
    </MasonryGrid>
  )
}

---

Props

Name	Type	Default	Description
children	ReactNode	--	The children should be an array of items whose parent element is a <div />, <a />, or <span />
columns?	number	4	If using the direction = 'column' prop, columns will display the grid with this number of columns
direction?	row | columns	row	This prop will dictate the direction of the flow of the grid
gap?	number	16	The amount of space between the elements in the grid
responsiveColumns?	MasonryGridColumns	--	If using the direction = 'column' prop, this will display the grid with the number of columns per noted screen size
rowHeight?	number	280	If using the direction = 'row' prop, or default grid, this will dictate the height of each row in the grid

type MasonryGridColumns

type MasonryGridColumns = {
  lg?: number
  md?: number
  sm?: number
  xl?: number
  xs?: number
}