Responsive imageList in MUI?

user_17762581 0
Viewed 2229

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?

material-ui reactjs responsive
1 Answers

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 }
user_95796660
Related