Masonry

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

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

<Masonry columns={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>

<Masonry columns={3} spacing={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>

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