A material-ui Image List with variant="masonry" displays the images column-based, while Image Lists of other variants display their images row-based.

Example of an ImageList with no variant, you can see in the codesandbox example that the images are first placed on rows and then columns.

<ImageList sx={{ width: 600 }} cols={3}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
        src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
      />
    </ImageListItem>
  ))}
</ImageList>

Example of an ImageList with variant="masonry", you can see in the codesandbox example that the images are first placed in columns and then rows.

<ImageList sx={{ width: 600 }} cols={3} variant="masonry">
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
        src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
      />
    </ImageListItem>
  ))}
</ImageList>

How can I have a masonry Image List where the images start filling rows instead of columns?