MasonryGrid

A component that arranges items in a masonry layout, optimizing space and creating a visually appealing grid. Ideal for displaying images, cards, or any content with varying heights.

<MasonryGrid
  padding="l"
  radius="l"
  background="neutral-medium"
  columns={6}
  m={{ columns: 4 }}
  s={{ columns: 2 }}
>
  {[16, 6, 4, 6, 16, 12, 7, 24, 4, 12, 6, 2, 24, 17, 12, 5, 9, 6, 20, 11].map((height, index) => (
      <Flex
          key={index}
          background="overlay"
          radius="l"
          border="neutral-alpha-medium"
          fill
          center
          height={height}
      >{index}
      </Flex>
  ))}
</MasonryGrid>

Columns

Control the number of columns in the grid using the columns prop. You can also set different column counts for various screen sizes using responsive props like l, m and s.

MasonryGrid

<MasonryGrid
  padding="l"
  radius="l"
  background="neutral-medium"
  columns={4}
  m={{ columns: 2 }}
  s={{ columns: 1 }}
>
  {[16, 6, 4, 6, 16, 12, 7, 24, 4, 12, 6, 2].map((height, index) => (
      <Flex
          key={index}
          background="overlay"
          radius="l"
          border="neutral-alpha-medium"
          fill
          center
          height={height}
      >{index}
      </Flex>
  ))}
</MasonryGrid>

Gap

Adjust the spacing between items using the gap prop.

MasonryGrid

<MasonryGrid
  padding="l"
  radius="l"
  background="neutral-medium"
  columns={4}
  gap={"16"}
>
  {[16, 6, 4, 6, 16, 12, 7, 24, 4, 12, 6, 2].map((height, index) => (
      <Flex
          key={index}
          background="overlay"
          radius="l"
          border="neutral-alpha-medium"
          fill
          center
          height={height}
      >{index}
      </Flex>
  ))}
</MasonryGrid>

API reference

Prop	Type	Default
children	React.ReactNode	—
gap Space between items.	SpacingToken-1undefined	8
columns How many columns.	number	3
style	React.CSSProperties	—
className	string	—
l Column count at the l breakpoint and below.	MasonryBreakpointProps	—
m Column count at the m breakpoint and below.	MasonryBreakpointProps	—
s Column count at the s breakpoint and below.	MasonryBreakpointProps	—
xs Column count at the xs breakpoint.	MasonryBreakpointProps	—
…and every FlexProps prop	inherited	—