Responsive imageList in MUI?

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?

Did you see: [Dynamically adjust ImageList columns based on screen size?](https://stackoverflow.com/questions/69383051/dynamically-adjust-imagelist-columns-based-on-screen-size?noredirect=1&lq=1) ? — Luuk, Dec 25 '21 at 18:52
Haven`t seen until yesterday. The solution seems a bit weird to me but at least I can work with it. Thank you anyway. — Glucus, Dec 26 '21 at 21:08

score 5 · Answer 1 · edited Jun 02 '22 at 23:16

5

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 }

edited Jun 02 '22 at 23:16

Link0

655
5
17

answered May 31 '22 at 11:13

faery

61
2
5

score 1 · Answer 2 · answered Sep 25 '22 at 17:55

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.

score -3 · Answer 3 · answered Nov 01 '22 at 00:44

The answer in this other thread solved the problem for me. https://stackoverflow.com/a/71804564/16238799 Quoting that answer here for quick reference:

<ImageList
  sx={{
    columnCount: {
      xs: '1 !important',
      sm: '2 !important',
      md: '3 !important',
      lg: '4 !important',
      xl: '5 !important',
    },
  }}
>
  {/* list items ... */}
</ImageList>

Responsive imageList in MUI?

3 Answers3