My project utilizes React and MUI as the UI library. I have a substantial amount of elements that need to be organized in a specific manner. While the Grid component is typically effective for this purpose, I encountered some challenges.
<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>
Applying specific styles:
const useStyles = makeStyles({
Grid: {
margin: "auto!important",
width: "90vw!important",
}
});
Each element within the grid is set to have a distinct height and width. The current implementation yields the following result:
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
| | | | | | | | | | | | | |
| | | | | | | | | | | | | |
|_ _ _| |_ _ _| |_ _ _| |_ _ _| |_ _ _| |_ _ _| |_ _ _|
_ _ _ _ _ _ _ _ _
| | | | | |
| | | | | |
|_ _ _| |_ _ _| |_ _ _|
Furthermore, the gap between elements is not consistently spaced and is affected by screen size. A wider screen leads to larger gaps between elements. My objective is to achieve the following layout:
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
| | | | | | | | | | | | | |
| | | | | | | | | | | | | |
|_ _ _| |_ _ _| |_ _ _| |_ _ _| |_ _ _| |_ _ _| |_ _ _|
_ _ _ _ _ _ _ _ _
| | | | | |
| | | | | |
|_ _ _| |_ _ _| |_ _ _|
My approach using css flex-box allowed me to achieve a closer representation of my ideal layout:
<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>
In cases where the screen size is too small, items in the last row are wrapped onto a new row. The issue I encounter is that the columns on the last row are centered instead of being positioned at the start of the row, as I desire. The gap size remains consistent.
How can I achieve the desired positioning for the last row?