Material Ui Grid doesn't scale properly

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>
);