CODEWITHSUNDEEP
reactjsmaterial-ui
Chris Evans
Chris Evans

Reputation: 875

React Material UI Nested Grid - Not working

I'm trying to generate a grid that is three deep. Example below:

enter image description here

I want the black box to stretch the length of the screen, and the three boxes to be aligned on the same row. I have put the three boxes in another grid that will go to a max-width of 1200px. this is so it looks neat on large screens. I want the three boxes to stack on mobile.

below is my code 

const Landing = (props) => {

  const useStyles = makeStyles(theme => ({
      root: {
        flexGrow: 1,
      },
      blackBox:{
          color:'white',
          backgroundColor:'black',
          width:'100%',

      }, 
      white:{
          color:'white',
      }
    }));

  const classes = useStyles();

  return (

  <div className={classes.root}>
      <Grid container className={classes.blackBox}>
         <Container maxWidth="sm">
           <Grid cols={1} item xs={12} sm={4} className={classes.white}>
              <Typography>Text  </Typography>   
           </Grid>
           <Grid cols={1} item xs={12} sm={4} className={classes.white}>
             <Typography>Text </Typography>
           </Grid>
           <Grid cols={1} item xs={12} sm={4} className={classes.white}>
             <Typography>Text</Typography>
           </Grid>
          </Container>
      </Grid>
  </div>
);

}

export default Landing;

The issue is when I add the element that only allow the three boxed to go max 1200 they all stack. When I remove it they don't stack but stretch the full with of the screen.

enter image description here

can anyone point me in the right direction?

Upvotes: 1

Views: 3644

Answers (1)

Julian Kleine
Julian Kleine

Reputation: 1547

You should put the Container outside the Grid

<Grid container className={classes.blackBox}>
   <Container maxWidth="sm">
      <Grid container>
         <Grid cols={1} item xs={12} sm={4} className={classes.white}>
            <Typography>Text </Typography>
         </Grid>
         <Grid cols={1} item xs={12} sm={4} className={classes.white}>
            <Typography>Text </Typography>
          </Grid>
          <Grid cols={1} item xs={12} sm={4} className={classes.white}>
            <Typography>Text</Typography>
          </Grid>
      </Grid>
   </Container>
</Grid>

Upvotes: 1

Related Questions