Material-UI Grid Overflow Column into next Row

Question

I am generating a list of from a list of 'x' items: I want to know how I can get the list to display like this

item1 item2

item3 item4

item5 item6

using Material-UI Grid. Currently I am using something like this but it only generates them in a single column.

  const display = () => {
    return(
      <React.Fragment>
        {items.map(i => (
          <Grid item xs={3} direction={'row'}>
            {i}
          </Grid>
        ))}
      </React.Fragment>
    )
  }

return (
            <Grid item xs={4} alignItems={"flex-start"}>
              items:
            </Grid>
            <Grid item xs={8} justify={"center"} alignItems={"flex-end"} direction={"column"}>
              {display()}
            </Grid>
)

daydreamer · Accepted Answer · 2019-08-21 22:47:18Z

1

You would need to spread the items evenly. The Grid system is based on 12 points, so keeping xs={6} is what you are looking for

<Grid container>
  {items.map((item, key) => (
     <Grid item key={key} xs={6} className={classes.item}>
         {item}
     </Grid>
   ))}
</Grid>

I have added a working example at https://codesandbox.io/s/material-demo-qe7mr Hope that helps you. Thanks

answered Aug 21, 2019 at 22:47

daydreamer

92.9k204 gold badges476 silver badges754 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Material-UI Grid Overflow Column into next Row

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related