Responsive imageList in MUI? [duplicate]

Question

I want to decrease the amount of imageList columns depending on the display width (a.k.a. media query) but it doesn't work properly. For example:

<ImageList variant="masonry" cols={{ xl: 3, md: 2, sm: 1 }} gap={18}>
  {images.map((image) => (
    <ImageListItem key={image.id}>
      <img
        src={image.urls.regular}
        srcSet={image.urls.regular}
        alt={image.alt_description}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

If I do this, I only get 1 column, and if I try cols={3}, I get 3 columns. Any tips?

Answer 1

You can change the number of columns dynamically, depending on theme media queries. Use something like this:

const matchDownMd = useMediaQuery(theme.breakpoints.down('sm'));

So you can use it later like this:

cols={matchDownMd ? 1 : 2 }

Answer 2

I know this is so annoying not being able to do a responsive grid through this " cols={{ xl: 3, md: 2, sm: 1 }} " code. Here is another approach. I read the class name of Mui " ImageList " element. it is " MuiImageList-root "

@media only screen and (max-width: 900px) {
  .MuiImageList-root {
    column-count: 3 !important;
  }
}

This code turns my "ImageList" grid into a responsive design. I hope there will be another answer about inline CSS code.