React MUI - Masonry mobile responsive - reactjs

Question

I'm new to react
I'm trying to figure out how I can make a Masonry image grid - mobile resonsive.
The idea is that I want the images to stack on top of each other on mobile view.
The Masonry grid should still act as a Masonry on desktop screens.
I just cannot figure out how to do that.
I appreciate the help.
Here is my code, view demo here
import * as React from 'react';
// material-ui
import { useTheme, styled } from '#mui/material/styles';
import { Box, Paper, Button, Container, Grid, Typography } from '#mui/material';
import Masonry from '#mui/lab/Masonry';
const Label = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(0.5),
textAlign: 'center',
color: theme.palette.text.secondary,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
}));
const MasonryPage = () => (
<Box>
<Masonry columns={3} spacing={3}>
{itemData.map((item, index) => (
<div key={index}>
<Label>{index + 1}</Label>
<img
src={`${item.img}?w=162&auto=format`}
srcSet={`${item.img}?w=162&auto=format&dpr=2 2x`}
alt={item.title}
loading="lazy"
style={{
borderBottomLeftRadius: 4,
borderBottomRightRadius: 4,
display: 'block',
width: '100%',
}}
/>
</div>
))}
</Masonry>
</Box>
);
export default MasonryPage;
const itemData = [
{
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
title: 'Fern',
},
{
img: 'https://images.unsplash.com/photo-1627308595229-7830a5c91f9f',
title: 'Snacks',
},
{
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
title: 'Mushrooms',
},
{
img: 'https://images.unsplash.com/photo-1529655683826-aba9b3e77383',
title: 'Tower',
},
{
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
title: 'Sea star',
},
];

Answer 1

As the previous poster suggested you can use MUI's breakpoints to set the number of columns based on viewport width. For example:
import React from 'react';
import Masonry from '#mui/lab/Masonry';
import Box from '#mui/material/Box';
import Typography from '#mui/material/Typography';
const CollectionList = (props) => {
return (
<Box sx={{ pt: 4 }}>
<Typography variant="h2">Collections</Typography>
<Masonry columns={{ xs: 1, sm: 2, md: 3 }} spacing={2}>
<div>One</div>
<div>Two</div>
<div>Three</div>
</Masonry>
</Box>
);
};
export default CollectionList;
The value will be set implicitly for each breakpoint you specify as well as any up to the next one set. So in the example above, any viewport with medium (md) or higher will have 3 columns.
columns={{ xs: 1, md: 3, xl: 4 }}
would set 1 column for anything smaller than medium (md), 3 columns for anything larger or equal to medium up to extra large. From there on, it will be 4 columns.

Answer 2

you might want to try columns={{lg:3, md:6}} like this