I'm trying to align 5 columns in one row, but I'm struggling to achieve the desired layout. Here is what I currently have:
https://i.stack.imgur.com/d3z3n.png
Any tips on how to make all columns appear in a single row?
You can also view my attempt on CodeSandbox: https://codesandbox.io/s/5-columns-in-one-row-0mym3j
Below is the code snippet: codes:
<Container style={{ marginTop: "1rem", marginBottom: "1rem" }}>
<Box sx={{ "& h1": { m: 0 } }}>
<Grid container spacing={2} justify="flex-start">
<Grid item xs={12} sm={6} md={4} lg={3}>
...
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
...
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
...
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
...
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
...
</Grid>
</Grid>
</Box>
</Container>