Currently, I am working on a design for a webpage that must be responsive to large, medium, and small screens. To achieve this responsiveness, I am using Material UI Grid container and placing Chips inside it with the style={{ marginLeft: 60 }} from the second chip onward. However, when the screen size changes, these chips overlap each other without any responsive behavior. Below is the snippet of my code:
<Grid container item xs={12}>
<Grid container item xs={11}>
<Grid item xs={2}>
<Chip/>
</Grid>
<Grid item xs={2} style={{ marginLeft: 60 }}>
<Chip/>
</Grid>
<Grid item xs={2} style={{ marginLeft: 60 }}>
<Chip/>
</Grid>
<Grid item xs={2} style={{ marginLeft: 60 }}>
<Chip/>
</Grid>
<Grid item xs={2} style={{ marginLeft: 57 }}>
<Chip/>
</Grid>
</Grid>
</Grid>
I am seeking advice on how to correct this design issue. Any suggestions would be greatly appreciated. Thank you in advance.