Masonry

Masonry lays out contents of different sizes as blocks of the same width and variable height with configurable gaps.

Masonry maintains a list of content blocks with a consistent width but variable height. The contents are ordered by row. If a row is already filled with the specified number of columns, the next item starts another row, and it is added to the shortest column.

Basic masonry

A simple example of a Masonry. Masonry is a container for one or more items. It can receive any element including <div /> and <img />.

<Masonry columns={4} spacing={1}>
  {heights.map((height, index) => (
    <Item key={index} sx={{ height }}>
      {index + 1}
    </Item>
  ))}
</Masonry>

Image masonry

This example demonstrates the use of Masonry for images. Masonry orders its children by row. If you'd like to order images by column, check out ImageList.

<Masonry columns={3} spacing={1}>
  {itemData.map((item, index) => (
    <Stack key={index}>
      <Label>{index + 1}</Label>
      <img
        src={`${item.img}?w=162&auto=format`}
        srcSet={`${item.img}?w=162&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
        style={{ borderBottomLeftRadius: 4, borderBottomRightRadius: 4 }}
      />
    </Stack>
  ))}
</Masonry>

Columns

This example demonstrates the use of the columns to configure the number of columns of a Masonry.

<Masonry columns={4} spacing={1}>
  {heights.map((height, index) => (
    <Item key={index} sx={{ height }}>
      {index + 1}
    </Item>
  ))}
</Masonry>

columns accepts responsive values:

<Masonry columns={{ xs: 3, sm: 4 }} spacing={1}>
  {heights.map((height, index) => (
    <Item key={index} sx={{ height }}>
      {index + 1}
    </Item>
  ))}
</Masonry>

Spacing

This example demonstrates the use of the spacing to configure the spacing between items. It is important to note that the value provided to the spacing prop is multiplied by the theme's spacing field.

<Masonry columns={3} spacing={3}>
  {heights.map((height, index) => (
    <Item key={index} sx={{ height }}>
      {index + 1}
    </Item>
  ))}
</Masonry>

spacing accepts responsive values:

<Masonry columns={3} spacing={{ xs: 1, sm: 2, md: 3 }}>
  {heights.map((height, index) => (
    <Item key={index} sx={{ height }}>
      {index + 1}
    </Item>
  ))}
</Masonry>

Server-side rendering

This example demonstrates the use of the defaultHeight, defaultColumns and defaultSpacing, which are used to support server-side rendering.

Note: defaultHeight should be large enough to render all rows. Also, it is worth mentioning that items are not added to the shortest column in case of server-side rendering.

<Masonry
  columns={4}
  spacing={1}
  defaultHeight={450}
  defaultColumns={4}
  defaultSpacing={1}
>
  {heights.map((height, index) => (
    <Item key={index} sx={{ height }}>
      {index + 1}
    </Item>
  ))}
</Masonry>

API

<Masonry />