mui grid 2 items per row

Question

I'm trying to get only 2 items per row but I keep getting them all on the same row.

return (
    <div>
      <Grid container item xs={12} spacing={-1}>
   
      ...
      <Grid container item spacing={2}>
      ...

          <h1> Uspar</h1>
          <Box sx={{ width: '100%' }}>
            <Box className={classes.productsWrapper}>
              {PRODUCTS.map((item, index) => (
                <Button className={classes.productItem} key={index}>
                  <img className={classes.productImage} src={item.img} />
                  <h1> {item.Title}</h1>
                  <h2> {item.Subtitle}</h2>
                  <Typography variant="body1">{item.description}</Typography>
                </Button>
              ))}
            </Box>
          </Box>
        </Grid>
      </Grid>
    </div>
  );
}

I have tried

grit item xs{6}

etc.

Answer 1

You should call the map function outside the grid. Try this way : https://codesandbox.io/s/wispy-bush-xme0f0?file=/src/App.js