I've been stuck on this part, and I've been struggling how can I manage to make it row, I tried to make it flexWrap, but it's going down instead of going its side.

   <Box sx={{display: {xs: 'flex'}, 
                     gap: {xs: '0px', md:'20px', 
                     flexWrap: 'wrap', 
                     alignItems: 'center' }}}
                     >
      {products.map((product) => (
        <CardProduct key={product._id}  product={product}/>
      ))}
   </Box>

outcome

this is I want to achieve, the first and second product must be align, and then have a gap between or spacing, then the 3rd product will automatically wrap... I tried to call the

flexWrap:'wrap'

but it failed. should I just the height ? or is it because the button is too big?

want to achieve

This is what it looks like when it only have two products

two images

CodePudding user response：

Try using a Grid:

<Grid container spacing={2}>
  {products.map((product) => (
    <Grid item xs={6} key={product._id}>
      <CardProduct product={product} />
    </Grid>
  ))}
</Grid>;

CodePudding user response：

To make 2 columns you can use flex-basis property, flex-basis: 50%; , do remove any padding or margin before. with flex-basis property you can set any width or get number of columns.

<Box sx={{display: {xs: 'flex'}, 
     gap: {xs: '0px', md:'20px', 
     flex-basis: '50%',
     alignItems: 'center' }}}
   >
  {products.map((product) => (
    <CardProduct key={product._id}  product={product}/>
  ))}

There is on more property in css that helps us to achieve any number of coumns without using flexbox.

.div {
  column-count: 2;
}