Masonry

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

Masonry maintains a list of content blocks with a consistent width but different 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 in order to optimize the use of space.

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={2}>
  {heights.map((height, index) => (
    <Item key={index} sx={{ height }}>
      {index + 1}
    </Item>
  ))}
</Masonry>

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

Press Enter to start editing

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.

Items with variable height

This example demonstrates the use of Masonry for items with variable height. Items can move to other columns in order to abide by the rule that items are always added to the shortest column and hence optimize the use of space.

Accordion 1

Contents

Accordion 2

Contents

Accordion 3

Contents

Accordion 4

Contents

Accordion 5

Contents

Accordion 6

Contents

Accordion 7

Contents

Accordion 8

Contents

Accordion 9

Contents

Accordion 10

Contents

<Masonry columns={3} spacing={2}>
  {heights.map((height, index) => (
    <Paper key={index}>
      <StyledAccordion sx={{ minHeight: height }}>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography>Accordion {index + 1}</Typography>
        </AccordionSummary>
        <AccordionDetails>Contents</AccordionDetails>
      </StyledAccordion>
    </Paper>
  ))}
</Masonry>

<Masonry columns={3} spacing={2}>
  {heights.map((height, index) => (
    <Paper key={index}>
      <StyledAccordion sx={{ minHeight: height }}>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography>Accordion {index + 1}</Typography>
        </AccordionSummary>
        <AccordionDetails>Contents</AccordionDetails>
      </StyledAccordion>
    </Paper>
  ))}
</Masonry>

Press Enter to start editing

Columns

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

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

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

Press Enter to start editing

columns accepts responsive values:

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

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

Press Enter to start editing

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>

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

Press Enter to start editing

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>

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

Press Enter to start editing

Sequential

This example demonstrates the use of the sequential to configure the sequential order. With sequential enabled, items are added in order from left to right rather than adding to the shortest column.

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

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

Press Enter to start editing

Server-side rendering

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

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

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

Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<Masonry />