[Masonry] Place items to the left when there are less objects than specified in the column prop

[hbjORbj]

• I have followed (at least) the PR section of the contributing guide.

Closes #32696

Problem:

• Having only 2 items inside Masonry while columns prop is set to a value greater than 2, e.g. 3 or 4, items are stretched across the masonry instead of being placed together at the left.

Solution:

• Change align-content property of MasonryRoot component from space-between to flex-start.

• Codesandbox Before

• Codesandbox After

p.s. Argos changes are expected

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 3d15644

[mnajdova]

Let's add a screenshot fixture for it, it's more reliable test for this type of scenarios.

[hbjORbj]

@mnajdova I agree!

e.g.,

[jackshi0912]

This could have introduce a new problem where the ImageListItemBar is rendered next to the image.

Steps to reproduce go to https://mui.com/material-ui/react-image-list/#title-bar-below-image-masonry and remove all but 2 data points in the code.

import * as React from 'react';
import Box from '@mui/material/Box';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import ImageListItemBar from '@mui/material/ImageListItemBar';

export default function TitlebarBelowMasonryImageList() {
  return (
    <Box sx={{ width: 500, height: 450, overflowY: 'scroll' }}>
      <ImageList variant="masonry" cols={3} gap={8}>
        {itemData.map((item) => (
          <ImageListItem key={item.img}>
            <img
              src={`${item.img}?w=248&fit=crop&auto=format`}
              srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
              alt={item.title}
              loading="lazy"
            />
            <ImageListItemBar position="below" title={item.author} />
          </ImageListItem>
        ))}
      </ImageList>
    </Box>
  );
}

const itemData = [
  {
    img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110',
    title: 'Bed',
    author: 'swabdesign',
  },
  {
    img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31',
    title: 'Books',
    author: 'Pavel Nekoranec',
  },
 
];