CODEWITHSUNDEEP
javascriptcssreactjsgridmaterial-ui
Kristoffer Tølbøll
Kristoffer Tølbøll

Reputation: 3357

Make material-ui grids wrap, on larger screens

I'm trying to set up a component with the Material UI grid system.

here is my code inside my component so far 

  <Container maxWidth="lg" className={classes.container}>
         <Grid container spacing={4}>
          <Paper className={classes.paper}>
            <Grid item xs={12} lg={6} style={{padding: '10px'}}>
            <CardActionArea component="a" href="#">
              <Card className={classes.card}>
                <div className={classes.cardDetails}>
                  <CardContent>
                    <Typography component="h2" variant="h5">
                      <Title size={'28px'}>Name</Title>
                    </Typography>
                    <Typography variant="subtitle1" color="grey">
                      Occupation
                    </Typography>
                    <Typography variant="subtitle1" paragraph>
                    Mauris eu porttitor dolor. Nulla pellentesque imperdiet sodales. Morbi tincidunt mattis ex eu molestie. Suspendisse scelerisque est vel mi volutpat tincidunt. Nulla felis odio, suscipit accumsan mollis vel, semper eget dui. Etiam eget hendrerit neque, vitae ornare nisi. Duis tincidunt erat vel nulla iaculis, vel viverra orci varius. Duis risus velit, tempus bibendum justo eu, blandit pulvinar libero. Aliquam ornare dui ut risus finibus, sit amet laoreet purus ultricies.
                    </Typography>
                    <CardMedia 
                    className={classes.media}
                    title="image picture"
                    image="https://www.ucd.ie/sportandfitness/t4media/Banner---PT-Course.jpg" /> 
                  </CardContent>
                </div>
                  <p>Hello</p>
              </Card>
            </CardActionArea>
          </Grid>
          <Grid item xs={12} lg={6} style={{padding: '10px'}}>
              <Card className={classes.card}>
                <div className={classes.cardDetails}>
                  <CardContent>
                    <Typography component="h2" variant="h5">
                      <Title size={'28px'}>Name</Title>
                    </Typography>
                    <Typography variant="subtitle1" color="grey">
                      Occupation
                    </Typography>
                    <Typography variant="subtitle1" paragraph>
                    Mauris eu porttitor dolor. Nulla pellentesque imperdiet sodales. Morbi tincidunt mattis ex eu molestie. Suspendisse scelerisque est vel mi volutpat tincidunt. Nulla felis odio, suscipit accumsan mollis vel, semper eget dui. Etiam eget hendrerit neque, vitae ornare nisi. Duis tincidunt erat vel nulla iaculis, vel viverra orci varius. Duis risus velit, tempus bibendum justo eu, blandit pulvinar libero. Aliquam ornare dui ut risus finibus, sit amet laoreet purus ultricies.
                    </Typography>
                    <CardMedia 
                    className={classes.media}
                    title="image picture"
                    image="https://www.ucd.ie/sportandfitness/t4media/Banner---PT-Course.jpg" /> 
                  </CardContent>
                </div>
                  <p>Hello</p>
              </Card>
          </Grid>
          </Paper>
         </Grid>
         </Container>

Here is the desktop view

enter image description here

tho problem is that I want the two grids to wrap on the same line, whenever the view in desktop mode. They fit fine on mobile and smaller screens, but I can't the two components to wrap in desktop, how can I change this?

Upvotes: 0

Views: 107

Answers (1)

PreDinnerSnack
PreDinnerSnack

Reputation: 91

I think the issue is caused because you use a <Paper> component inside your Grid container. The direct child of a <Grid> container, should be another <Grid> component.

Try Wrapping the <Paper> around the <Grid>. Like this:

<Container maxWidth="lg" className={classes.container}>
   <Paper className={classes.paper}>
     <Grid container spacing={4}>
        <Grid item xs={12} lg={6} style={{padding: '10px'}}>
        <CardActionArea component="a" href="#">
          <Card className={classes.card}>
            <div className={classes.cardDetails}>
              <CardContent>
                <Typography component="h2" variant="h5">
                  <Title size={'28px'}>Name</Title>
                </Typography>
                <Typography variant="subtitle1" color="grey">
                  Occupation
                </Typography>
                <Typography variant="subtitle1" paragraph>
                Mauris eu porttitor dolor. Nulla pellentesque imperdiet sodales. Morbi tincidunt mattis ex eu molestie. Suspendisse scelerisque est vel mi volutpat tincidunt. Nulla felis odio, suscipit accumsan mollis vel, semper eget dui. Etiam eget hendrerit neque, vitae ornare nisi. Duis tincidunt erat vel nulla iaculis, vel viverra orci varius. Duis risus velit, tempus bibendum justo eu, blandit pulvinar libero. Aliquam ornare dui ut risus finibus, sit amet laoreet purus ultricies.
                </Typography>
                <CardMedia 
                className={classes.media}
                title="image picture"
                image="https://www.ucd.ie/sportandfitness/t4media/Banner---PT-Course.jpg" /> 
              </CardContent>
            </div>
              <p>Hello</p>
          </Card>
        </CardActionArea>
      </Grid>
      <Grid item xs={12} lg={6} style={{padding: '10px'}}>
          <Card className={classes.card}>
            <div className={classes.cardDetails}>
              <CardContent>
                <Typography component="h2" variant="h5">
                  <Title size={'28px'}>Name</Title>
                </Typography>
                <Typography variant="subtitle1" color="grey">
                  Occupation
                </Typography>
                <Typography variant="subtitle1" paragraph>
                Mauris eu porttitor dolor. Nulla pellentesque imperdiet sodales. Morbi tincidunt mattis ex eu molestie. Suspendisse scelerisque est vel mi volutpat tincidunt. Nulla felis odio, suscipit accumsan mollis vel, semper eget dui. Etiam eget hendrerit neque, vitae ornare nisi. Duis tincidunt erat vel nulla iaculis, vel viverra orci varius. Duis risus velit, tempus bibendum justo eu, blandit pulvinar libero. Aliquam ornare dui ut risus finibus, sit amet laoreet purus ultricies.
                </Typography>
                <CardMedia 
                className={classes.media}
                title="image picture"
                image="https://www.ucd.ie/sportandfitness/t4media/Banner---PT-Course.jpg" /> 
              </CardContent>
            </div>
              <p>Hello</p>
          </Card>
        </Grid>
       </Grid>
      </Paper>

     </Container>

Upvotes: 1

Related Questions