CODEWITHSUNDEEP
reactjsflexboxgridmaterial-ui
Haq.H
Haq.H

Reputation: 973

Material-UI Grid Overflow Column into next Row

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

Upvotes: 1

Views: 1760

Answers (1)

daydreamer
daydreamer

Reputation: 91949

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

Upvotes: 1

Related Questions