Material Ui Grid doesn't scale properly - reactjs

Question

I'm trying to deal with Grid responsiveness but I can't achieve my goal, idea is to with full screen show all 6 columns next to each other, with smaller screen decrease it to 3 columns and then another 3 columns below it. On big screen it looks fine as it looks like this:
However when I decrease width of the screen it starts to look like this:
and I have no really a clue how to make it work right, my code :
<Grid container spacing={24} style={{ padding: 24 }}>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Aid</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">
Associated Security Domain
</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Life Cycle</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Load File Aid</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Version</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Privileges</StyledTypography>
</Grid>
{mainData.map((el, i) => {
return (
<React.Fragment key={i}>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">{el.aid}</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">
{el.associatedSecurityDomain}
</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">
{el.lifeCycle}
</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">
{el.loadFileAid}
</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">{el.version}</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<Tooltip
title={
<React.Fragment>
{el.privileges && el.privileges.length ? (
el.privileges.map((el, i) => <p key={i}>{el}</p>)
) : (
<p>None</p>
)}
</React.Fragment>
}
placement="top"
>
<Button className={classes.tooltipBtn}>
Hover to see Privilages
</Button>
</Tooltip>
</Grid>
</React.Fragment>
);
})}
</Grid>
and here is result I wish to achieve:

Answer 1

In order to achieve what you want, you'll have to change the structure for small screens.
You can use the withWidth or useMediaQuery hook from Material-UI and use conditional rendering to render the "desktop" or "mobile" layout.
Below is how the mobile structure should look like. This will contain a lot of duplicate code though.
const SmallScreenComponent = () => (
<Grid container spacing={24} style={{ padding: 24 }}>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Aid</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">
Associated Security Domain
</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Life Cycle</StyledTypography>
</Grid>
{mainData.map((el, i) => {
return (
<React.Fragment key={i}>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">{el.aid}</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">
{el.associatedSecurityDomain}
</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">
{el.lifeCycle}
</StyledTypography>
</Grid>
</React.Fragment>
);
})}
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Load File Aid</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Version</StyledTypography>
</Grid>
<Grid item lg={2} md={4}>
<StyledTypography variant="h4">Privileges</StyledTypography>
</Grid>
{mainData.map((el, i) => {
return (
<React.Fragment key={i}>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">
{el.loadFileAid}
</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<StyledTypography variant="body1">{el.version}</StyledTypography>
</Grid>
<Grid item lg={2} md={4} className={classes.gpProfileGrid}>
<Tooltip
title={
<React.Fragment>
{el.privileges && el.privileges.length ? (
el.privileges.map((el, i) => <p key={i}>{el}</p>)
) : (
<p>None</p>
)}
</React.Fragment>
}
placement="top"
>
<Button className={classes.tooltipBtn}>
Hover to see Privilages
</Button>
</Tooltip>
</Grid>
</React.Fragment>
);
})}
</Grid>
);