React MUI: How to create a flex-box like grid using the Grid component

Question

I am using React and MUI as the UI library for my application. I have a big list of elements that I want to order in a specific way. Using the Grid component would normally solve the problem.

 <Grid container
                direction="row"
                justifyContent="start"
                alignItems="center"
                spacing={4}
                className={classes.Grid}
            >
                {Cards.map(c => (
                    <Grid item xs key={c._id} >
                        <Card id={c._id} title={c.title} description={c.description} />
                    </Grid>
                ))}
</Grid>

Styles:

const useStyles = makeStyles({
    Grid: {
        margin: "auto!important",
        width: "90vw!important",
    }
});

Every single element in the grid has a specific height and width. Using the code, this is what the result looks like:

 _ _ _   _ _ _   _ _ _   _ _ _   _ _ _   _ _ _   _ _ _
|     | |     | |     | |     | |     | |     | |     |
|     | |     | |     | |     | |     | |     | |     |
|_ _ _| |_ _ _| |_ _ _| |_ _ _| |_ _ _| |_ _ _| |_ _ _|

         _ _ _           _ _ _          _ _ _  
        |     |         |     |        |     | 
        |     |         |     |        |     | 
        |_ _ _|         |_ _ _|        |_ _ _|

Also the spacing between each item does not remain static. It is manipulated by the screen size. A wider screen will result into a bigger gap between each element. What I really do want:

 _ _ _   _ _ _   _ _ _   _ _ _   _ _ _   _ _ _   _ _ _
|     | |     | |     | |     | |     | |     | |     |
|     | |     | |     | |     | |     | |     | |     |
|_ _ _| |_ _ _| |_ _ _| |_ _ _| |_ _ _| |_ _ _| |_ _ _|

 _ _ _   _ _ _   _ _ _   
|     | |     | |     | 
|     | |     | |     | 
|_ _ _| |_ _ _| |_ _ _|

This is where I got using css flex-box:

<Box
        sx={{
               display: "flex",
               justifyContent: "center" ,
               gap: "20px",
               flexWrap: "wrap",
               margin: "auto",
               width: "90vw",
           }}
       >
                {Cards.map(c => (
     <Card key={c._id} id={c._id} title={c.title} description={c.description}/>
                ))}
</Box>

If the screen size is too small, the last element on the row will be wraped on the next row. But there is only one problem, the columns on the last row are centered, but I just want them to be positioned at the start of the row, with the same gap size. So how can I really achieve something similar to what I want?

You should use grid not flexbox for two dimensional layouts. — morganney
– morganney, Commented Jan 17, 2022 at 14:36

Artiom O · Accepted Answer · 2022-06-18 10:58:13Z

2

CSS

display: "grid",
gridTemplateColumns: "repeat(auto-fill, 220px)", //the width of the card 
justifyContent: "center",
gridGap: "20px",

Body

<Box className={classes.List}> //css
    {Cards.map(c => (
        <Grid item xs key={c._id} >
            <Card id={c._id} title={c.title} description={c.description} />
        </Grid>
    ))}
</Box>

answered Jun 18, 2022 at 10:58

Artiom O

4851 gold badge10 silver badges21 bronze badges

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

Comments

nightElf · Accepted Answer · 2022-01-17 15:08:36Z

1

If you want to use grid, give appropriate value in the breakpoint sx, md, etc. Also, you don't need to pass the props: direction, justifyContent and alignItems to the Grid container

<Grid item xs={3} md={3} key={c._id}>
...
</Grid>

example:

<Grid container spacing={4}>
   {Cards.map((c) => (
     <Grid item xs={3} md={4} key={c._id}>
         ...
     </Grid>
   ))}
</Grid>

For FlexBox: just remove justifyContent='center' props.

answered Jan 17, 2022 at 15:08

nightElf

5222 silver badges4 bronze badges

1 Comment

Artiom O Over a year ago

1. The gap between each item does not remain static. It is still manipulated by the screen size. (ex: a preset 4px gap should remain 4px no matter how large the width of the screen is. Also each element on the same row overlaps another when the screen size is too small. They should be wrapped on the next row. 2. I just want each row to have the columns postioned in the center, but the last row should have something similar to grid's last row where the first colum is positioned on the same vertical axis position and the rest just goes by simetrically

Collectives™ on Stack Overflow

React MUI: How to create a flex-box like grid using the Grid component

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related