What's the best way to display two products on a mobile screen?

Question

What's the best way to display two products on a mobile screen?

I'm having trouble figuring out how to make this part look right. I've tried using flexWrap, but the items are stacking vertically instead of aligning horizontally.

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

See the desired outcome here

I want the first and second products to align and have some spacing between them, with the third product wrapping automatically. I've tried setting flexWrap:'wrap' but it didn't work. Should I adjust the height or is it because of the button size?

Click here to see what I'm aiming for

This is how it looks when there are only two products:

View the images here

css reactjs flexbox material-ui

Answer 1

Answer №1

Consider utilizing the Grid feature:

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

Answer 2

Consider utilizing the Grid feature:

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

Answer 3

Answer №2

Creating a layout with 2 columns can be achieved using the flex-basis property. By setting flex-basis: 50%; and ensuring to remove any padding or margin, you can easily define the width of each column and determine the 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}/>
  ))}

Another CSS property that allows for creating multiple columns without relying on flexbox is column-count:

.div {
  column-count: 2;
}

Answer 4

Creating a layout with 2 columns can be achieved using the flex-basis property. By setting flex-basis: 50%; and ensuring to remove any padding or margin, you can easily define the width of each column and determine the 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}/>
  ))}

Another CSS property that allows for creating multiple columns without relying on flexbox is column-count:

.div {
  column-count: 2;
}

Answer 5

Answer №3

If you're looking to implement a grid layout, Grid from Material-UI is a great option. They provide an excellent example that perfectly fits your requirements.

Check out the link here

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Grid container justifyContent="center" spacing={spacing}>
      {[0, 1, 2].map((value) => (
        <Grid key={value} item>
          <Paper className={classes.paper} />
        </Grid>
      ))}
    </Grid>
  </Grid>

Answer 6

If you're looking to implement a grid layout, Grid from Material-UI is a great option. They provide an excellent example that perfectly fits your requirements.

Check out the link here

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Grid container justifyContent="center" spacing={spacing}>
      {[0, 1, 2].map((value) => (
        <Grid key={value} item>
          <Paper className={classes.paper} />
        </Grid>
      ))}
    </Grid>
  </Grid>

What's the best way to display two products on a mobile screen?

Answer №1

Answer №2

Answer №3

Similar questions

The alignment of flexbox within a list item is not positioned at the top as expected

The footer is not being properly pushed down by the DIV

Guide to utilizing jQuery for random toggling of classes

Issue with consistent search autocomplete feature in a stationary navigation bar using bootstrap technology

Navigating using passing data in ReactJs

How can images be effectively stored while utilizing MongoDB, Express, React, and Node.js?

Creating a webpage with a layout that features three full-length columns using

The attempt to install myapp using npx create-react-app has failed. The installation has been aborted

Encountering issues with setting state on Login as Redux state and useSelector are returning undefined

When attempting to run the command npx create-react-app myApp, an error occurred with the message "_npx10796" indicating that a package.json file

Error: null was supposed to match XXX exactly, but does not

Removing the animation from a Material-UI Select component in React

How can you trigger two separate JavaScript hover effects?

The resurgence of React JS in its role as a powerful tool

Error: Unable to use map on products as it is not a function

Tips on showcasing lengthy string content from JSON in a structured list format using react with typescript

Transfer multiple files by dragging and dropping them into a single file upload option

Creating a button component in React that spans the entire width

Enable scrolling exclusively for the content within a tab, without affecting the tab label in Clarity Tabs

Centering an Image of Unspecified Dimensions Both Vertically and Horizontally with Hover Effect on Anchor